.sicmap {
		/* Colour tokens — overridden per block from the Style controls */
		--sm-intro:  #ffffff;
		--sm-bg:     #f2e0df;
		--sm-state:  #a64034;
		--sm-stroke: #ffffff;
		--sm-dot:    #f2e0df;
		--sm-active: #a64034;
		--sm-list:   #021859;
		--sm-accent: #bf1304;

		display: block;
		font-family: inherit;
		background: var(--sm-bg);
	}
	.sicmap-body {
		display: grid;
		/* The projection keeps the map's aspect ratio, so at this shape the
		   WIDTH is what limits it — a taller stage alone would just add
		   empty space above and below. The city list gives up 60px and the
		   stage grows to match, so the extra width is usable. */
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: stretch;
		min-height: 720px;
	}

	/* Left column: the map with its detail bar beneath. */
	.sicmap-col { display: flex; flex-direction: column; min-width: 0; }

	/* ---- intro: eyebrow, heading, stats ---- */
	.sicmap-intro {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		flex-wrap: wrap;
		padding: 72px 48px 40px;
		background: var(--sm-intro);
	}
	.sicmap-intro-text { max-width: 720px; }
	.sicmap-eyebrow {
		display: flex; align-items: center; gap: 12px;
		margin: 0 0 22px;
		font-family: var(--sic-label-font);
		font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
		color: var(--sm-accent);
	}
	.sicmap-eyebrow span { width: 34px; height: 2px; background: var(--sm-accent); display: inline-block; }
	.sicmap-heading {
		margin: 0;
		font-family: var(--sic-heading-font);
		font-weight: 400;
		font-size: clamp(30px, 4vw, 60px);
		line-height: 1.08;
		color: var(--sm-list);
	}
	.sicmap-stats { display: flex; gap: 40px; flex: 0 0 auto; padding-bottom: 6px; }
	.sicmap-stat { text-align: center; }
	.sicmap-stat-num {
		display: block;
		font-family: var(--sic-heading-font);
		font-size: clamp(26px, 3vw, 40px);
		color: var(--sm-list);
		line-height: 1;
	}
	.sicmap-stat-label {
		display: block; margin-top: 8px;
		font-family: var(--sic-label-font);
		font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
		color: var(--sm-accent);
	}
	@media (max-width: 760px) {
		.sicmap-intro { padding: 44px 24px 28px; gap: 24px; }
		.sicmap-stats { gap: 26px; }
	}
	.sicmap-map {
		position: relative;
		background: var(--sm-bg);
		overflow: hidden;
		/* Fills whatever height the column leaves after the detail bar, so
		   adding the bar does not make the block taller. */
		flex: 1 1 auto;
		min-height: 0;
	}
	.sicmap-map svg { display: block; }

	.sicmap-geo { fill: var(--sm-state); stroke: var(--sm-stroke); stroke-width: 1; }
	

	.sicmap-marker { cursor: pointer; }
	/* Invisible touch target, larger than the marker it sits under. */
	.sicmap-hit { fill: transparent; }
	/* Only an upcoming stop draws a plain dot — a visited one is marked
	   by its numbered disc alone. */
	.sicmap-dot { fill: var(--sm-dot); stroke: #a64034; stroke-width: 1.5; transition: r .15s ease, fill .15s ease; }
	.sicmap-marker.is-active .sicmap-dot { fill: var(--sm-active); stroke: #ffffff; stroke-width: 3; }
	/* The numbered disc IS the marker now, so it carries the outline the
	   dot used to: a white ring keeps it legible against the brick
	   states and the blush field alike. */
	.sicmap-badge {
		fill: #021859; stroke: #ffffff; stroke-width: 2;
		transition: fill .15s ease, r .15s ease;
	}
	.sicmap-marker.is-active .sicmap-badge { fill: var(--sm-accent); }
	.sicmap-badge-t {
		fill: #ffffff; font-size: 15px; font-weight: 600;
		font-family: var(--sic-label-font); pointer-events: none;
	}
	
	/* The tooltip. It must stay absolutely positioned: without this it
	   lays out in the flow, and hovering a marker resizes the map — which
	   reads as the markers shaking. A dangling selector above this rule
	   swallowed it into a descendant combinator and did exactly that. */
	.sicmap-tip {
		position: absolute; z-index: 5; transform: translate(-50%, -100%);
		background: var(--sm-tipbg, #021859); color: var(--sm-tiptext, #ffffff);
		padding: 10px 16px; border-radius: 4px;
		text-align: center; pointer-events: none; white-space: nowrap;
		box-shadow: 0 10px 26px rgba(0,0,0,.28);
	}
	.sicmap-tip b { display: block; font-family: var(--sic-heading-font); font-size: 15px; font-weight: 400; }
	.sicmap-tip span {
		display: block; margin-top: 3px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
		/* Derived from the tooltip text colour so it follows whatever is set. */
		color: currentColor; opacity: .72; font-family: var(--sic-label-font);
	}
	.sicmap-tip::after {
		content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
		border-left: 6px solid transparent; border-right: 6px solid transparent;
		border-top: 6px solid var(--sm-tipbg, #021859);
	}

	/* ============================================================
	   The tooltip as a card, on a phone
	   ------------------------------------------------------------
	   Under 700px the city list is hidden, which took the quote and
	   the link to the city page with it. Tapping a marker now opens
	   this instead: the same three things the list item carried,
	   centred over the map so a pin near an edge cannot push it off
	   screen. Dismissed by the close button, by tapping the map, or
	   with Escape.
	   ============================================================ */
	.sicmap-tip.is-card {
		position: absolute;
		left: 50%; top: 50%; right: auto; bottom: auto;
		transform: translate(-50%, -50%);
		width: min(300px, calc(100% - 40px));
		padding: 22px 20px 20px;
		border-radius: 10px;
		text-align: left;
		white-space: normal;          /* the label version is one line; a quote is not */
		pointer-events: auto;         /* it holds a link and a button now */
		box-shadow: 0 18px 44px rgba(0,0,0,.42);
		z-index: 6;
	}
	/* No pointer: the card is not attached to a marker. */
	.sicmap-tip.is-card::after { display: none; }

	.sicmap-tip.is-card b { font-size: 19px; line-height: 1.15; padding-right: 22px; }
	.sicmap-tip.is-card span { margin-top: 5px; }

	.sicmap-tip-quote {
		margin: 14px 0 0;
		font-family: var(--sic-heading-font);
		font-size: 15px; font-style: italic; line-height: 1.4;
		color: currentColor; opacity: .92;
	}
	.sicmap-tip-link {
		display: inline-block; margin-top: 16px;
		font-family: var(--sic-label-font);
		font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
		color: currentColor; text-decoration: none;
		border-bottom: 1px solid currentColor; padding-bottom: 3px;
	}
	.sicmap-tip-link:hover, .sicmap-tip-link:focus-visible { opacity: .78; }

	.sicmap-tip-x {
		position: absolute; top: 8px; right: 8px;
		width: 32px; height: 32px;          /* a finger-sized target, not a 16px glyph */
		display: grid; place-items: center;
		background: none; border: 0; cursor: pointer;
		color: currentColor; opacity: .6;
		font: 400 22px/1 var(--sic-label-font);
	}
	.sicmap-tip-x:hover, .sicmap-tip-x:focus-visible { opacity: 1; }
	.sicmap-tip-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }

	/* ---- right-hand list ---- */
	.sicmap-list {
		background: var(--sm-list);
		overflow-y: auto;
		/* Grid stretches this to the map's height; the inner scroll keeps a
		   long city list from forcing the whole block taller. */
		min-height: 0;
	}
	.sicmap-item {
		padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.07);
		border-left: 3px solid transparent; cursor: pointer; transition: background .15s ease;
	}
	.sicmap-item:hover { background: rgba(255,255,255,.03); }
	.sicmap-item.is-active { background: rgba(255,255,255,.06); border-left-color: var(--sm-accent); }
	.sicmap-item.is-upcoming { opacity: .55; }

	.sicmap-item-head { display: flex; align-items: center; gap: 14px; }
	.sicmap-num {
		flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		background: rgba(255,255,255,.12); color: #ffffff;
		font-size: 11px; font-family: var(--sic-label-font);
	}
	.sicmap-item.is-active .sicmap-num { background: var(--sm-accent); }
	.sicmap-item.is-upcoming .sicmap-num { background: none; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.72); }
	.sicmap-city { font-family: var(--sic-heading-font); font-size: 21px; color: #ffffff; line-height: 1.2; }
	.sicmap-state {
		margin-left: auto; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.62);
		font-family: var(--sic-label-font);
	}
	.sicmap-item.is-active .sicmap-state { color: var(--sm-accent); }
	.sicmap-meta {
		margin: 8px 0 0 40px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
		color: rgba(255,255,255,.62); font-family: var(--sic-label-font);
	}
	.sicmap-item.is-active .sicmap-part { color: var(--sm-accent); }
	.sicmap-detail { margin: 14px 0 4px 40px; }
	.sicmap-quote {
		margin: 0 0 16px; font-family: var(--sic-heading-font); font-style: italic;
		font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.84);
	}
	.sicmap-link {
		display: inline-block; padding: 9px 16px; border: 1px solid var(--sm-accent);
		color: var(--sm-accent); text-decoration: none; font-size: 10px; letter-spacing: .12em;
		text-transform: uppercase; font-family: var(--sic-label-font);
		transition: background .15s ease;
	}
	.sicmap-link:hover { background: rgba(255,255,255,.08); }
	.sicmap-empty { padding: 40px; color: rgba(255,255,255,.62); text-align: center; font-size: 14px; }

	@media (max-width: 900px) {
		.sicmap-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
		/* Stacked, the column no longer has a height to fill, so the map
		   needs its own. */
		.sicmap-map { flex: 0 0 auto; height: 420px; }
		.sicmap-list { max-height: 460px; }
	}

	@media (max-width: 700px) {
		/* The list goes: stacked beneath the map it repeated what the map
		   already shows — every city, in order, each one numbered — and
		   pushed the rest of the page down by a screen to do it. The
		   markers stay tappable, and each one still names its city in the
		   tooltip, so nothing is lost with it. */
		.sicmap-list { display: none; }
		.sicmap-map { height: 380px; }
	}

	/* ============================================================
	   Detail bar — a summary of the selected city, sitting directly
	   under the map so the block ends on content rather than on the
	   empty space left below the map panel.
	   ============================================================ */
	
	
	
	
	
	
	
	
	
	

	@media (max-width: 760px) {
		
		
	}