/*
	The World Map page.

	Every colour, size, weight and tracking here comes from css/tokens.css. Do not
	reintroduce a literal - see docs/design-system.md. The exceptions are the alpha
	values over photography and over the map, which have no token because they are
	transparency rather than colour.

	The page is a single screen on desktop: a full-bleed map with the gallery index
	floating over it. On a phone it is a stack - a sticky map with the index
	scrolling underneath - because glass floating over a 390px screen would cover
	the thing it floats on.
*/

/* ---------------------------------------------------------------- the frame */

/*
	The map fills the viewport at every width, so this page has no second screen to
	scroll to - and the theme footer below a full-height map would give the document
	a scrollbar of its own on top of the index's. The document is therefore not
	allowed to scroll here, and the footer is dropped. This is the one template
	without one.
*/
html.otr-map-page,
body.otr-map-page { overflow: hidden; }

/* Both elements: overflow on body only reaches the viewport while html is
   `visible`, and the theme sets overflow-x on html. */
body.otr-map-page #footer-wrapper,
body.otr-map-page #toTop { display: none !important; }

.otr-map {
	--otr-map-chrome: 0px;
	background: var(--otr-surface);
	font-family: var(--otr-font);
}
.otr-map *,
.otr-map *::before,
.otr-map *::after { box-sizing: border-box; }
.otr-map a { text-decoration: none; }

/* Google's own controls and credits are switched off in the script; these are the
   nodes it renders anyway. */
.otr-map .gm-style-cc,
.otr-map .gmnoprint { display: none !important; }

.otr-map__frame {
	position: relative;
	height: calc(100vh - var(--otr-map-chrome));
	/* dvh so the phone's collapsing address bar does not crop the map. */
	height: calc(100dvh - var(--otr-map-chrome));
	overflow: hidden;
}
.otr-map__canvas { position: absolute; inset: 0; background: var(--otr-surface); }
.otr-map__canvas > div { position: absolute; inset: 0; }

/* ------------------------------------------------------------- map chrome */

.otr-map__chrome {
	position: absolute;
	z-index: 9;
	inset: 0 0 auto 0;
	padding: 26px 30px 40px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.otr-map__title {
	margin: 0 0 16px;
	font-size: var(--otr-size-h1);
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-wide);
	text-transform: uppercase;
	color: var(--otr-text);
	line-height: 1.5;
}

.otr-map__controls {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.otr-map__regions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	pointer-events: auto;
}
.otr-map__region {
	font-family: inherit;
	font-size: 10px;
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-caps);
	text-transform: uppercase;
	color: var(--otr-text);
	background: var(--otr-scrim-soft);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 8px 15px;
	cursor: pointer;
	transition: border-color var(--otr-transition), color var(--otr-transition),
		background var(--otr-transition);
}
.otr-map__region:hover,
.otr-map__region:focus-visible { border-color: var(--otr-accent); color: var(--otr-accent); }
.otr-map__region[aria-pressed="true"] {
	background: var(--otr-accent);
	border-color: var(--otr-accent);
	color: var(--otr-surface);
}

/* ----------------------------------------------------------------- the index */

/*
	As narrow as the rows tolerate, hugging the right edge, and only as tall as its
	contents - so a short list, or a filtered one, does not leave a column of dead
	panel down the side of the map.
*/
.otr-map__index {
	position: absolute;
	z-index: 10;
	right: 22px;
	top: 22px;
	width: clamp(272px, 23vw, 330px);
	max-height: calc(100% - 44px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 0 6px;
	background: rgba(14, 14, 14, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(16px) saturate(1.15);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);

	/* The only scrollbar on the page, so it has to look like it belongs to it. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.otr-map__index::-webkit-scrollbar { width: 9px; }
.otr-map__index::-webkit-scrollbar-track { background: transparent; }
.otr-map__index::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: content-box;
}
.otr-map__index:hover::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	background-clip: content-box;
}
.otr-map__index::-webkit-scrollbar-thumb:hover {
	background: var(--otr-accent);
	background-clip: content-box;
}

.otr-map__group[hidden] { display: none !important; }

.otr-map__region-name {
	position: sticky;
	top: 0;
	z-index: 3;
	margin: 0;
	padding: 13px 26px 11px;
	font-size: 11px;
	font-weight: var(--otr-weight-bold);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--otr-accent);
	background: rgba(14, 14, 14, 0.86);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.otr-map__place {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 14px;
	align-items: center;
	padding: 13px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: background var(--otr-transition);
}
.otr-map__place:hover,
.otr-map__place:focus-visible,
.otr-map__place.is-active { background: rgba(255, 255, 255, 0.045); }

.otr-map__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--otr-surface-raised);
}
.otr-map__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(0.55) brightness(0.8);
	transition: filter 0.35s ease, transform 0.6s ease;
}
.otr-map__place:hover .otr-map__thumb img,
.otr-map__place:focus-visible .otr-map__thumb img,
.otr-map__place.is-active .otr-map__thumb img { filter: none; transform: scale(1.06); }

.otr-map__name {
	display: block;
	margin: 0 0 5px;
	font-size: var(--otr-size-label);
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-caps);
	text-transform: uppercase;
	color: var(--otr-text);
	line-height: 1.4;
	transition: color var(--otr-transition);
}
.otr-map__place:hover .otr-map__name,
.otr-map__place:focus-visible .otr-map__name,
.otr-map__place.is-active .otr-map__name { color: var(--otr-accent); }

.otr-map__where {
	display: block;
	margin: 0;
	font-size: 11px;
	color: var(--otr-text-muted);
	letter-spacing: var(--otr-tracking-slight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Two lines, because the shot date and the publication date are often a year
   apart and telling them apart matters more than saving a row of height. */
.otr-map__meta {
	display: block;
	margin-top: 6px;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otr-text-dim);
}
.otr-map__meta-line { display: block; line-height: 1.75; }
.otr-map__meta b { color: var(--otr-text-heading); font-weight: var(--otr-weight-bold); }
.otr-map__meta i {
	font-style: normal;
	color: rgba(255, 255, 255, 0.34);
	letter-spacing: var(--otr-tracking-caps);
}
.otr-map__meta-line + .otr-map__meta-line b {
	color: var(--otr-text-muted);
	font-weight: var(--otr-weight-normal);
}

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

/*
	A pin is a point on the map with a photograph standing above it on a stem. At
	rest only the dot shows; the place being pointed at blooms. The pin element
	itself has no size - it is positioned at a coordinate - so the hit area is its
	own child, and hovering any child is what puts the state on the pin.
*/
.otr-map__pin { position: absolute; display: block; }
.otr-map__pin[hidden] { display: none !important; }

.otr-map__pin-hit {
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-radius: 50%;
	cursor: pointer;
}

.otr-map__pin-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--otr-accent);
	opacity: 0.75;
	transition: opacity var(--otr-transition), transform 0.25s ease, box-shadow 0.25s ease;
}
.otr-map__pin.is-open .otr-map__pin-dot {
	opacity: 1;
	transform: scale(1.25);
	box-shadow: 0 0 0 5px rgba(255, 255, 136, 0.16);
}

/* Anchored by its bottom edge to the dot, so it grows upward to meet the disc
   rather than down through the caption. */
.otr-map__pin-stem {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 0;
	margin-left: -0.5px;
	background: linear-gradient(to top, rgba(255, 255, 136, 0.85), rgba(255, 255, 136, 0.25));
	transition: height 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.otr-map__pin.is-open .otr-map__pin-stem { height: 46px; }

.otr-map__pin-disc {
	position: absolute;
	left: 50%;
	bottom: 46px;
	width: 104px;
	height: 104px;
	margin-left: -52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--otr-surface-raised);
	border: 2px solid var(--otr-accent);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
	transform: scale(0.15);
	transform-origin: bottom center;
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.22s ease;
}
.otr-map__pin.is-open .otr-map__pin-disc { transform: scale(1); opacity: 1; }
.otr-map__pin-disc img { width: 100%; height: 100%; object-fit: cover; display: block; }

.otr-map__pin-caption {
	position: absolute;
	left: 50%;
	top: 14px;
	width: 190px;
	margin-left: -95px;
	text-align: center;
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}
.otr-map__pin.is-open .otr-map__pin-caption { opacity: 1; transform: none; }
.otr-map__pin-caption b {
	display: block;
	font-size: 11px;
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-wide);
	text-transform: uppercase;
	color: var(--otr-text);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}
.otr-map__pin-caption span {
	display: block;
	margin-top: 5px;
	font-size: 10px;
	letter-spacing: var(--otr-tracking-caps);
	text-transform: uppercase;
	color: var(--otr-accent);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* ------------------------------------------------------- touch-only pieces */

/*
	Two controls that exist only on a phone, where the page is map-first: a button
	that raises the index over the map, and the card that a tapped pin fills in.
	Both are hidden on desktop, where hovering a row or a pin does the same work
	without either of them.
*/
.otr-map__index-toggle,
.otr-map__index-close,
.otr-map__card { display: none; }

/* ----------------------------------------------------------------- narrow ---
	Not the desktop layout squeezed, and not the desktop layout stacked either.
	There is no hover on a phone, so the index cannot be the thing that drives the
	map, and a pin cannot reveal anything by being pointed at. The map takes the
	screen; a tapped pin fills in a card at the bottom rather than navigating, and
	only the card - or a second tap - opens the gallery. The index is still there,
	one button away, as a plain list of links.
*/
@media (max-width: 1024px) {
	.otr-map__chrome { padding: 16px 18px 40px; }
	.otr-map__title {
		font-size: var(--otr-size-label);
		margin-bottom: 12px;
		letter-spacing: var(--otr-tracking-caps);
	}
	.otr-map__region { padding: 7px 12px; font-size: 9px; }

	/* The index becomes a sheet over the map, not a column beside it. */
	.otr-map__index {
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		width: auto;
		max-height: 80%;
		z-index: 20;
		padding: 0 0 10px;
		border-width: 1px 0 0;
		transform: translateY(101%);
		transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
	}
	.otr-map__index.is-open { transform: none; }

	.otr-map__index-close {
		display: block;
		position: sticky;
		top: 0;
		z-index: 4;
		width: 100%;
		padding: 14px 18px;
		text-align: left;
		font-family: inherit;
		font-size: 10px;
		font-weight: var(--otr-weight-bold);
		letter-spacing: var(--otr-tracking-caps);
		text-transform: uppercase;
		color: var(--otr-accent);
		background: rgba(14, 14, 14, 0.92);
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		cursor: pointer;
	}

	.otr-map__index-toggle {
		display: block;
		flex: none;
		pointer-events: auto;
		padding: 8px 15px;
		font-family: inherit;
		font-size: 10px;
		font-weight: var(--otr-weight-bold);
		letter-spacing: var(--otr-tracking-caps);
		text-transform: uppercase;
		color: var(--otr-surface);
		background: var(--otr-accent);
		border: 0;
		border-radius: 999px;
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
		cursor: pointer;
	}

	/*
		The card a tapped pin fills in: the same shape as an index row, because it is
		the same thing - a gallery, its photograph, and the way in. It owns the bottom
		edge outright; the Index button sits up in the controls row so the two cannot
		collide, and so the button stays clear of the cookie banner and the phone's
		own home indicator.
	*/
	.otr-map__card {
		display: grid;
		grid-template-columns: 62px 1fr 38px;
		align-items: center;
		gap: 14px;
		position: absolute;
		z-index: 18;
		left: 12px;
		right: 12px;
		bottom: 12px;
		padding: 12px;
		background: rgba(14, 14, 14, 0.86);
		border: 1px solid rgba(255, 255, 255, 0.14);
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(16px) saturate(1.15);
		-webkit-backdrop-filter: blur(16px) saturate(1.15);
		transform: translateY(calc(100% + 18px));
		opacity: 0;
		transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.22s ease;
	}
	.otr-map__card.is-open { transform: none; opacity: 1; }

	.otr-map__card-thumb {
		display: block;
		aspect-ratio: 1;
		overflow: hidden;
		background: var(--otr-surface-raised);
	}
	.otr-map__card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

	.otr-map__card-name {
		display: block;
		font-size: var(--otr-size-label);
		font-weight: var(--otr-weight-bold);
		letter-spacing: var(--otr-tracking-caps);
		text-transform: uppercase;
		color: var(--otr-text);
		line-height: 1.35;
	}
	.otr-map__card-meta {
		display: block;
		margin-top: 6px;
		font-size: 10px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--otr-text-dim);
	}
	.otr-map__card-meta b { color: var(--otr-text-muted); font-weight: var(--otr-weight-normal); }

	/* The action, as a target rather than a line of text. */
	.otr-map__card-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		border: 1px solid var(--otr-accent);
		color: var(--otr-accent);
		font-size: 14px;
		line-height: 1;
	}

	.otr-map__region-name { padding: 12px 18px 10px; }
	.otr-map__place { grid-template-columns: 82px 1fr; gap: 14px; padding: 13px 18px; }

	/* Nothing on a phone points at a row, so the row never lights up; and the
	   bloom shrinks, with its caption dropped, because the card says it better. */
	.otr-map__place.is-active { background: none; }
	.otr-map__pin-disc { width: 76px; height: 76px; margin-left: -38px; bottom: 34px; }
	.otr-map__pin.is-open .otr-map__pin-stem { height: 34px; }
	.otr-map__pin-caption { display: none; }
	.otr-map__pin-hit { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}

@media (prefers-reduced-motion: reduce) {
	.otr-map *,
	.otr-map *::before,
	.otr-map *::after { transition-duration: 0.01ms !important; }
}