/**
 * 1890 Interactive Map
 *
 * Palette is the site's own Elementor global kit, so the map reads as part of
 * the page rather than as an embedded widget:
 *   #231F20  ink / headings     #F79E1E  accent
 *   #FFF5ED  soft background    #FFFFFF  site background
 *
 * The map sits directly on the page — no panel, no background — so the states
 * are drawn as line art: a soft cream fill with a warm border that defines the
 * shape against white, and a tint of the brand accent for the states that host
 * an institution.
 *
 * EVERY selector is scoped under `.tim`. That is not stylistic: Elementor's
 * global kit styles bare `button` at (0,1,1) and a plugin on this site styles
 * bare `svg` with `width: 1em`. Unscoped selectors lose to both — which turned
 * the directory orange-on-cream and squeezed the whole map into an 18px sliver.
 */

.tim {
	--tim-ink: #231F20;
	--tim-accent: #F79E1E;
	--tim-soft: #FFF5ED;
	--tim-white: #fff;
	--tim-muted: #AFAFAF;

	/* Map surfaces, derived from the two brand colours above. Every state is
	   drawn the same whether or not it hosts an institution — the pins say
	   that, so shading the states as well only said it twice. */
	--tim-land: #FFF5ED;
	--tim-land-line: #E6D3BE;

	/* Only while a card is open, and only under that card's own pin. The
	   states are identical at rest -- the pins already say which ones host an
	   institution -- so this is not that shading coming back; it answers
	   "where am I looking?" for as long as the question is being asked. */
	--tim-land-active: #FFE8CE;

	/* The marker is INK at rest and accent when it is the live one. It was the
	   other way round, and nineteen accent pins on a cream map read as nineteen
	   alerts — the colour was carrying no information because everything had
	   it. Ink at rest lets the map be read as geography, and puts the accent
	   entirely at the service of "this is the one you are looking at".

	   Named separately from the palette because admin-picker.css mirrors these
	   three exactly, and picker.mjs asserts the two files still agree. */
	--tim-pin-fill: var(--tim-ink);
	--tim-pin-fill-active: var(--tim-accent);
	--tim-pin-line: var(--tim-white);

	--tim-radius: 10px;
	--tim-shadow: 0 14px 36px rgba(35, 31, 32, .18), 0 2px 6px rgba(35, 31, 32, .08);

	/* Pin geometry. The tip is the anchor, so the height also sets how far the
	   popup has to clear the marker.

	   The HIT width is held at 24px and does not shrink with the drawing: the
	   marker gets smaller on a narrow screen, but a touch target has to stay at
	   the WCAG 2.5.8 minimum, and that is the width where it is needed most.

	   Only the HEIGHT is declared. The marker's width comes from the viewBox's
	   own aspect ratio, so it cannot be squashed: setting both dimensions by
	   hand meant every breakpoint was a chance for the two to drift apart from
	   the 20:33 the artwork is drawn at. */
	--tim-hit-w: 24px;
	--tim-pin-h: clamp(15px, 3vw, 33px);

	/* The BUTTON, which is the touch target, and is never smaller than 24px in
	   either axis whatever the drawing does. Below about 800px the marker is
	   smaller than its own target and the extra height is added ABOVE the
	   drawing, so the tip still lands on the coordinate. */
	--tim-pin-box: max(var(--tim-pin-h), var(--tim-hit-w));

	/* The touch/hover mode, published for map.js to read. The breakpoint is
	   declared ONCE, here in the media query below, instead of as a matching
	   literal in both files: the script and the stylesheet disagreeing means the
	   card is a fixed panel while the script still waits for a hover, which is
	   indistinguishable from the map being dead. */
	--tim-mode: desktop;

	/* The gap has to clear the marker at its RAISED height, not its resting
	   one: the hover lifts it ~5px and scales it, which added about 8px to the
	   top. At 10px the raised marker sat exactly on the card's arrow and hid
	   it. */
	--tim-gap: 22px;

	/* Motion, declared once so a change of pace is one edit rather than six.
	   --tim-step is the gap between two pins landing: nineteen of them at 34ms
	   is a sweep of about two thirds of a second, long enough to read as a
	   sequence and short enough that nobody is kept waiting for the map.
	   --tim-lead holds the pins back until the land beneath them has settled. */
	--tim-ease: cubic-bezier(.22, .61, .36, 1);
	--tim-ease-back: cubic-bezier(.2, .8, .3, 1.35);
	--tim-step: 34ms;
	--tim-lead: 300ms;

	font-family: inherit;
	color: var(--tim-ink);
}

.tim *,
.tim *::before,
.tim *::after {
	box-sizing: border-box;
}

/* Elementor's kit styles every <button> on this site — orange text on cream
   with 17px/40px padding. These are the properties this file does not
   otherwise set, reset so none of them leak in. */
.tim .tim__pin,
.tim .tim__close {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-shadow: none;
	min-width: 0;
	min-height: 0;
}

/* The kit styles `button:hover` as well, at (0,2,1) — which outranks the reset
   above and painted a solid orange rectangle behind the marker the instant it
   was hovered. Going through the parent gets these to (0,3,1) so they win
   regardless of which stylesheet the browser happens to read first. */
.tim .tim__marker .tim__pin:hover,
.tim .tim__marker .tim__pin:focus,
.tim .tim__marker .tim__pin:active {
	background: none;
	box-shadow: none;
	border: 0;
	color: inherit;
}

.tim .tim__heading {
	margin: 0 0 1rem;
	text-align: center;
}

/* ---------- the touch picker ------------------------------------------ */

/* A list of names, above the map, on touch widths only.

   It is not a convenience. At 390px the whole country is 350px wide, which puts
   Delaware State and UMES about ONE PIXEL apart — no pin size and no zoom fixes
   that, and the map alone simply cannot be used to choose between them. On a
   pointer the pins are far enough apart and hover works, so the list would only
   be clutter; hence display:none rather than visually-hidden, which also keeps
   it from duplicating all nineteen pins in the accessibility tree.

   A real <select>, not a custom widget: on a phone this opens the platform's
   own picker — full height, scrollable, with type-ahead — which is better than
   anything that could be built here and needs no code to work with a screen
   reader or a keyboard. */
.tim .tim__picker {
	display: none;
	margin: 0 0 14px;
}

.tim .tim__picker-label {
	display: block;
	margin: 0 0 6px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tim-accent);
}

.tim .tim__select {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 44px 12px 14px;
	border: 1px solid var(--tim-land-line);
	border-radius: var(--tim-radius);
	background-color: var(--tim-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23231F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px 9px;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.25;
	color: var(--tim-ink);
	cursor: pointer;
	text-overflow: ellipsis;

	/* 16px is a hard floor, not a preference: iOS Safari zooms the whole page
	   in when a control smaller than this takes focus, and it does not zoom
	   back out — so the map is left off-screen behind a magnified page. */
	font-size: 16px;
}

.tim .tim__select:focus-visible {
	outline: 2px solid var(--tim-ink);
	outline-offset: 2px;
}

/* ---------- stage ----------------------------------------------------- */

/* The stage takes its height from the SVG, and the SVG takes it from its own
   viewBox — `width: 100%; height: auto` on a viewBox'd SVG is an intrinsic
   ratio, exactly like an <img>.
   
   It used to be `aspect-ratio` on the stage instead, and that broke the page
   below 768px: Elementor switches its containers to `flex-wrap: wrap` there,
   and a WRAPPING COLUMN flex container resolves an item's height without
   accounting for an aspect-ratio child. The widget froze at its parent's
   content box — 192px — while the map inside it was up to 422px, so the map
   spilled out of its own widget and the footer was laid out underneath it.
   An intrinsic ratio is real content height, which every layout algorithm
   accounts for, so there is nothing left to get this wrong.
   
   Sizing the SVG through .tim__stage is for (0,3,0): a plugin here styles bare
   `svg` with `width: 1em`, which at an 18px root squeezed the map to an 18px
   sliver while the height stayed correct — it read as "the states aren't
   rendering". */
.tim .tim__stage {
	position: relative;
	width: 100%;
}

.tim .tim__stage .tim__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	animation: tim-land-in .55s var(--tim-ease) backwards;
}

.tim .tim__state {
	fill: var(--tim-land);
	stroke: var(--tim-land-line);
	stroke-width: 1;
	stroke-linejoin: round;
	transition: fill .3s ease, stroke .3s ease;
}

/* Set by map.js on the state the open pin sits in, and cleared when the card
   closes. map.js also moves the path to the end of the group first: SVG has no
   z-index, only paint order, so an accent outline on a state drawn early is
   half-covered by the neighbours drawn after it. */
.tim .tim__state.is-active {
	fill: var(--tim-land-active);
	stroke: var(--tim-accent);
}

/* ---------- pins ------------------------------------------------------ */

.tim .tim__pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Deliberately NOT transformed, and zero-sized. A transformed ancestor becomes
   the containing block for any position:fixed descendant, which made the mobile
   popup resolve left/right against the pin and collapse to zero width. */
.tim .tim__marker {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: auto;

	/* --tim-i is this marker's place in the west-to-east sweep, written by the
	   renderer. The fallback matters: a marker without one lands with the first
	   group rather than being held back forever by an invalid calc(). */
	--tim-delay: calc(var(--tim-lead) + var(--tim-i, 0) * var(--tim-step));
}

/* A teardrop marker, not a dot — so the shape itself points at the place.
   That changes where the button sits: the TIP is the anchor, so the whole
   button hangs ABOVE the coordinate (margin-top of a full height) rather than
   being centred on it. Get that wrong and every pin reads 16px too far north.

   24x32 keeps the target above the WCAG 2.5.8 minimum in both axes while
   staying narrow enough for neighbours — Delaware and Maryland sit about 20px
   apart, so a wider target makes one of them unreachable. */
.tim .tim__pin {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: var(--tim-hit-w);
	height: var(--tim-pin-box);
	margin: calc(0px - var(--tim-pin-box)) 0 0 calc(var(--tim-hit-w) / -2);
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	/* Falls from above onto its own tip. The animation is on the BUTTON, not on
	   the icon inside it: the icon's transform belongs to the hover lift, and an
	   animation with a forwards fill on the same property would win against that
	   transition permanently -- the marker would never lift again. */
	transform-origin: 50% 100%;
	animation: tim-pin-drop .5s var(--tim-ease-back) var(--tim-delay) backwards;
}

/* The ring the pin leaves where it lands: on the ground, at the tip, under the
   marker itself, and gone before the next pin has finished falling. It is the
   affordance -- it says these are objects, they arrived, they can be touched --
   without becoming a pulse that is still asking for attention an hour later. */
.tim .tim__pin::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: calc(var(--tim-pin-h) * 1.05);
	height: calc(var(--tim-pin-h) * 1.05);
	margin: 0 0 calc(var(--tim-pin-h) * -.525) calc(var(--tim-pin-h) * -.525);
	border: 2px solid var(--tim-pin-fill);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: tim-pin-ring .8s ease-out calc(var(--tim-delay) + 300ms) backwards;
}

/* (0,3,0) on purpose: a plugin on this site styles bare `svg` with width:1em —
   and `width: auto` is also what makes the squash impossible: an SVG with a
   viewBox has an intrinsic aspect ratio, so a definite height and an auto width
   can only ever produce the proportions it was drawn at.

   `margin-inline: auto` then centres a marker narrower than its own hit box,
   which is what keeps the tip on the coordinate once the two sizes diverge. */
.tim .tim__pin .tim__pin-icon {
	display: block;
	width: auto;
	height: var(--tim-pin-h);
	margin-inline: auto;
	overflow: visible;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 2px 2px rgba(35, 31, 32, .25));
	transition: transform .24s cubic-bezier(.34, 1.5, .64, 1), filter .24s ease;
}

.tim .tim__pin-shape {
	fill: var(--tim-pin-fill);
	stroke: var(--tim-pin-line);
	stroke-width: 1.6;
	transition: fill .18s ease;
}

.tim .tim__pin-eye {
	fill: var(--tim-pin-line);
}

/* The hover is a LIFT, not a recolour: the marker rises off the map with its
   shadow spreading, and a shadow stays behind on the ground at the exact
   coordinate — so the pin can move without the location appearing to move
   with it. transform-origin is the tip, which is what keeps the two aligned. */
.tim .tim__pin::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: calc(var(--tim-pin-h) * .36);
	height: calc(var(--tim-pin-h) * .12);
	margin: 0 0 -1px calc(var(--tim-pin-h) * -.18);
	border-radius: 50%;
	background: rgba(35, 31, 32, .2);
	filter: blur(1.5px);
	opacity: 0;
	transform: scale(.3);
	transition: opacity .2s ease, transform .24s ease;
}

.tim .tim__pin:hover .tim__pin-icon,
.tim .tim__pin:focus-visible .tim__pin-icon,
.tim .tim__marker.is-open .tim__pin-icon {
	transform: translateY(-5px) scale(1.1);
	filter: drop-shadow(0 6px 6px rgba(35, 31, 32, .22));
}

.tim .tim__pin:hover .tim__pin-shape,
.tim .tim__pin:focus-visible .tim__pin-shape,
.tim .tim__marker.is-open .tim__pin-shape {
	fill: var(--tim-pin-fill-active);
}

.tim .tim__pin:hover::after,
.tim .tim__pin:focus-visible::after,
.tim .tim__marker.is-open .tim__pin::after {
	opacity: 1;
	transform: scale(1);
}

.tim .tim__pin:focus-visible {
	outline: 2px solid var(--tim-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

.tim .tim__marker.is-open {
	z-index: 30;
}

/* The other markers are deliberately NOT dimmed while a card is open. It was
   tried, and it reads as the map switching off around whatever you happen to be
   pointing at -- the open pin already carries the deeper fill, the lift and the
   card, which is plenty of emphasis without taking the rest of the country
   away. Do not reintroduce it. */

/* ---------- popup ----------------------------------------------------- */

/* Always above the pin, never below.
   `padding-bottom` forms a TRANSPARENT BRIDGE across the gap down to the top of
   the marker. Without it the pointer leaves the marker while crossing that gap,
   the close timer starts, and the card flickers — which is what made hovering
   feel glitchy.

   `bottom` is the marker's HEIGHT, not zero: the bridge has to stop where the
   marker begins. Anchored at zero it spanned the pin as well, and a 300px-wide
   transparent box sitting over the pin swallows the click that closes the card
   — so the pin visibly did nothing when clicked a second time. */
.tim .tim__popup {
	position: absolute;
	left: 0;
	bottom: var(--tim-pin-box);
	width: 300px;
	padding-bottom: var(--tim-gap);
	transform: translateX(-50%);
	z-index: 40;
}

.tim .tim__popup[hidden] {
	display: none;
}

/* A card on its way out: still in the DOM so the exit can play, and inert so it
   cannot catch a hover meant for the map underneath it. map.js sets `hidden`
   once the animation has run -- and only then clears the clamping, or a card at
   the map's edge would snap back to centre while it was still visible. */
.tim .tim__popup.is-closing {
	pointer-events: none;
}

.tim .tim__popup.is-closing .tim__popup-inner {
	animation: tim-card-out .16s ease-in both;
}

/* Rises the last few pixels into place, from the direction of the pin.

   A translate and nothing else. It was a scale-from-the-arrow first, and that
   reads as the card being INFLATED; a short slide reads as it arriving, which
   is what it is doing. It also means no transform-origin to keep aimed at a
   moving arrow.

   The animation is on the INNER element on purpose: position() measures the
   outer .tim__popup, and getBoundingClientRect() includes an element's own
   transform. Animating the outer would hand the clamping a box caught mid-
   slide, and cards near the map edge would settle in the wrong place. */
.tim .tim__popup-inner {
	position: relative;
	animation: tim-card-in .24s var(--tim-ease) both;
	background: var(--tim-white);
	border: 1px solid var(--tim-soft);
	border-radius: var(--tim-radius);
	box-shadow: var(--tim-shadow);
	padding: 15px 16px 14px;
	text-align: left;
}

/* Arrow pointing back down at the pin. */
.tim .tim__popup-inner::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border: 8px solid transparent;
	border-top-color: var(--tim-white);
	filter: drop-shadow(0 3px 2px rgba(35, 31, 32, .10));
}

/* Near the map edges the card is nudged sideways; JS moves the arrow back over
   the pin via --tim-arrow so it keeps pointing at the right dot. */
.tim .tim__popup.is-shifted .tim__popup-inner::after {
	left: var(--tim-arrow, 50%);
}

/* No close button on the hover card — moving the pointer off the marker
   already closes it, so a button to do the same thing was a control that never
   needed pressing. It stays in the markup and reappears below 640px, where the
   card is a fixed panel opened by TAP and there is no hover-off to close it. */
.tim .tim__close {
	display: none;
	position: absolute;
	top: 4px;
	right: 6px;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	color: var(--tim-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.tim .tim__popup .tim__close:hover,
.tim .tim__popup .tim__close:focus-visible {
	color: var(--tim-ink);
	background: var(--tim-soft);
}

/* min-height reserves the logo band before the image has painted, so the card
   cannot grow underneath the pointer as the logo arrives. It also gives all
   nineteen cards the same logo band whatever the shape of the mark. */
.tim .tim__logo {
	display: flex;
	align-items: center;
	min-height: 52px;
	margin-bottom: 9px;
}

.tim .tim__logo-img {
	max-width: 132px;
	max-height: 52px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.tim .tim__name {
	margin: 0 0 8px;
	font-size: .98rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--tim-ink);
}

/* One column, always. Established and Location used to sit side by side, which
   made the card a two-column layout at the one width where it had least room to
   spare; everything in the card now stacks. */
.tim .tim__facts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 9px;
	padding: 0 0 9px;
	border-bottom: 1px solid var(--tim-soft);
}

.tim .tim__fact {
	margin: 0;
}

.tim .tim__facts dt {
	margin: 0;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tim-accent);
}

.tim .tim__facts dd {
	margin: 2px 0 0;
	font-size: .88rem;
	font-weight: 600;
}

.tim .tim__desc {
	font-size: .84rem;
	line-height: 1.45;
}

.tim .tim__desc p {
	margin: 0 0 .5em;
}

.tim .tim__desc p:last-child {
	margin-bottom: 0;
}

.tim .tim__link {
	display: inline-block;
	margin-top: 10px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tim-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--tim-accent);
	padding-bottom: 2px;
}

.tim .tim__link:hover,
.tim .tim__link:focus-visible {
	color: var(--tim-accent);
}

/* ---------- motion ---------------------------------------------------- */

/* The entrance is one idea: the country settles, and then the institutions are
   placed onto it, west to east -- so it reads as nineteen decisions arriving
   rather than as a texture that was always there.

   It runs on page load, from CSS, with no class to wait for. That is the safe
   direction: a script that never arrives leaves a finished map. Doing it the
   other way -- hidden until JS says otherwise -- turns a failed request into a
   blank map, which is a far worse failure than an entrance nobody watched.

   Nothing here fills FORWARDS. `backwards` holds the opening frame through the
   delay, and once a marker has landed its transform belongs to the hover again. */

@keyframes tim-land-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* The overshoot at 62% is the weight -- it is what separates a pin being put
   down from a pin being faded in. */
@keyframes tim-pin-drop {
	0%   { opacity: 0; transform: translateY(-20px) scale(.55); }
	62%  { opacity: 1; transform: translateY(2px) scale(1.06); }
	100% { opacity: 1; transform: none; }
}

/* Starts AT zero opacity rather than at its brightest: `backwards` fill means
   the first frame is what shows during the delay, and a ring that began visible
   would sit on the map as a stray circle until its pin arrived. */
@keyframes tim-pin-ring {
	0%   { opacity: 0; transform: scale(.2); }
	22%  { opacity: .34; transform: scale(.42); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes tim-card-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Leaves the way it came, and faster -- an exit that takes as long as the
   entrance feels like the card is reluctant to go. */
@keyframes tim-card-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(8px); }
}

/* Below 1023px the card is a panel against the bottom of the viewport, so it
   arrives from the edge it is attached to instead of growing out of a pin that
   may be the other end of the country. */
@keyframes tim-sheet-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@keyframes tim-sheet-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(12px); }
}

/* Held while the map is still below the fold. PAUSED, not un-started, so the
   `backwards` fill keeps holding the opening frame -- and so the worst case if
   map.js never runs is an entrance that played to an empty room. */
.tim.is-waiting .tim__svg,
.tim.is-waiting .tim__pin,
.tim.is-waiting .tim__pin::before {
	animation-play-state: paused;
}

/* ---------- responsive ------------------------------------------------ */

/* Below this the card becomes a panel pinned to the bottom of the viewport, and
   opens on TAP rather than hover.
   
   Two reasons it is not a floating card here: the eastern pins sit only a few
   pixels apart at these widths, so a card anchored to one of them covers the
   very pins being chosen between; and hover is not a dependable input on
   anything this size. `--tim-mode` is what tells map.js the same thing. */
@media (max-width: 1023px) {
	.tim {
		--tim-mode: mobile;
	}

	.tim .tim__picker {
		display: block;
	}

	.tim .tim__popup {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding-bottom: 0;
		transform: none;
		z-index: 9999;
	}

	.tim .tim__popup-inner {
		padding: 16px;
		max-height: 62vh;
		overflow-y: auto;
		animation: tim-sheet-in .26s var(--tim-ease) both;
	}

	.tim .tim__popup.is-closing .tim__popup-inner {
		animation: tim-sheet-out .18s ease-in both;
	}

	.tim .tim__popup-inner::after {
		display: none;
	}

	.tim .tim__close {
		display: block;
		width: 36px;
		height: 36px;
		font-size: 26px;
	}

	/* Room for the close button, which only exists at this width. */
	.tim .tim__logo {
		padding-right: 30px;
	}

	.tim .tim__name {
		padding-right: 30px;
	}
}

/* Every animation above is decoration on a map that already worked without it,
   so all of it comes off here and nothing is lost: the states, the pins and the
   cards simply appear, the lift becomes a colour change, and the ground shadow
   still says which marker is live.

   map.js reads the same preference and drops its exit delay to zero -- otherwise
   a dismissed card would sit there, fully opaque, for the length of an animation
   that is not running. */
@media (prefers-reduced-motion: reduce) {
	/* .tim__stage is not decoration here: the rule that starts this animation is
	   .tim .tim__stage .tim__svg, and a two-class selector cannot switch off a
	   three-class one. Written short, this silently did nothing -- and read at
	   any point after 550ms it LOOKED like it had worked, because the animation
	   had simply finished. */
	.tim .tim__stage .tim__svg,
	.tim .tim__pin,
	.tim .tim__pin::before,
	.tim .tim__popup-inner,
	.tim .tim__popup.is-closing .tim__popup-inner {
		animation: none;
	}

	.tim .tim__state,
	.tim .tim__pin-icon,
	.tim .tim__pin-shape,
	.tim .tim__pin::after {
		transition: none;
	}

	/* The lift is the motion; the colour and the ground shadow still carry the
	   state, so nothing is lost by holding the marker still. */
	.tim .tim__pin:hover .tim__pin-icon,
	.tim .tim__pin:focus-visible .tim__pin-icon,
	.tim .tim__marker.is-open .tim__pin-icon {
		transform: none;
	}
}

/* Matches the theme's own utility if present, and stands alone if not. */
.tim .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}