/*
 * The atlas, in the colours of the site.
 *
 * The module this comes from carried its own identity: forest green, a serif
 * face fetched from Google Fonts, rounded cards and drop shadows, and text
 * down to eight pixels. None of that survived the move, and none of it should
 * have:
 *
 *   - every colour is now a variable from theme.json. There is no blue
 *     written here. Change the palette in the theme and the atlas follows.
 *   - the faces are the site's own, served by the theme from its own folder:
 *     Anybody for headings, Inter for text. No request leaves the council's
 *     hosting for a font.
 *   - no drop shadow anywhere. The brand builds hierarchy from a 1px rule and
 *     a step in tint, and so does this file.
 *   - nothing smaller than the theme's "label" size. Eight-pixel captions were
 *     unreadable at arm's length, let alone for the readers this site is for.
 *
 * The fallbacks in the variable block are the current palette, written out so
 * that the atlas still looks like itself if it is ever rendered outside the
 * theme — the local preview bench does exactly that.
 *
 * Everything is prefixed `wald-`. There is no bundler to scope this file, and
 * a bare `.card` or `.gallery` would collide with the theme within a week.
 */

.wald-atlas {
	--wald-primary: var(--wp--preset--color--primary, #003371);
	--wald-primary-dark: var(--wp--preset--color--primary-dark, #001e49);
	--wald-primary-soft: var(--wp--preset--color--primary-soft, #e8eefa);
	--wald-ink: var(--wp--preset--color--ink, #191c1e);
	--wald-ink-muted: var(--wp--preset--color--ink-muted, #434750);
	--wald-ink-subtle: var(--wp--preset--color--ink-subtle, #6b7180);
	--wald-border: var(--wp--preset--color--border, #c3c6d2);
	--wald-border-soft: var(--wp--preset--color--border-soft, #e2e5ec);
	--wald-border-strong: var(--wp--preset--color--border-strong, #7a8194);
	--wald-surface: var(--wp--preset--color--surface, #ffffff);
	--wald-surface-2: var(--wp--preset--color--surface-2, #f2f4f6);
	--wald-canvas: var(--wp--preset--color--canvas, #f7f9fb);

	--wald-label: var(--wp--preset--font-size--label, 0.875rem);
	--wald-body: var(--wp--preset--font-size--body, 1rem);
	--wald-heading-md: var(--wp--preset--font-size--heading-md, 1.5rem);
	--wald-face-heading: var(
		--wp--preset--font-family--heading,
		Anybody,
		"Arial Black",
		system-ui,
		sans-serif
	);

	/* Small controls only. Large containers keep square corners. */
	--wald-radius: 4px;

	color: var(--wald-ink);
	font-size: var(--wald-body);
}

/* --------------------------------------------------------------------------
   1. Shared pieces
   -------------------------------------------------------------------------- */

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

/*
 * The whole design of this page rests on the `hidden` attribute: the server
 * writes everything out and marks what needs a script, the script unmarks it.
 * The browser hides such an element through `display: none` in its own
 * stylesheet — which ANY author rule outweighs. Every `display: flex` and
 * `display: grid` below therefore un-hid what it dressed: the gallery stayed
 * on screen beside the map, and the search bar opened by itself while its
 * button still announced "collapsed".
 */
.wald-atlas [hidden] {
	display: none !important;
}

/* Hidden from sight, kept for screen readers (RGAA 10.8). */
.wald-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wald-icon {
	width: 1.125em;
	height: 1.125em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wald-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--wald-label);
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wald-ink-muted);
}

/*
 * Buttons of the atlas are drawn here, not by the theme: the theme styles the
 * Button block, and none of these is one.
 *
 * `:where()` carries no weight of its own, so this reset sits below every rule
 * that dresses a particular button. Written plainly as `.wald-atlas button`, it
 * outweighed `.wald-view` and `.wald-topic` — one class each — and stripped
 * the padding from every control in the toolbar: the labels ran into their
 * pictograms and into each other.
 */
.wald-atlas :where(button) {
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

.wald-atlas :where(button:disabled) {
	cursor: default;
	opacity: 0.45;
}

.wald-atlas :where(img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--wald-surface-2);
}

/* A photograph that never arrived says so, in the frame it should have
   filled, rather than leaving a broken icon. */
.wald-atlas img.is-missing {
	object-fit: contain;
	padding: 1rem;
	font-size: var(--wald-label);
	line-height: 1.5;
	color: var(--wald-ink-muted);
}

.wald-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	font-size: var(--wald-body);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	color: var(--wald-surface);
	background: var(--wald-primary);
	border: 1px solid var(--wald-primary);
	border-radius: var(--wald-radius);
}

.wald-button:hover,
.wald-button:focus {
	color: var(--wald-surface);
	background: var(--wald-primary-dark);
	border-color: var(--wald-primary-dark);
}

.wald-text-button {
	font-size: var(--wald-label);
	color: var(--wald-primary);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.wald-icon-button {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: var(--wald-radius);
	color: var(--wald-ink-muted);
}

.wald-icon-button:hover {
	background: var(--wald-primary-soft);
	color: var(--wald-primary-dark);
}

.wald-icon-button--round {
	border: 1px solid var(--wald-border);
	border-radius: 50%;
}

.wald-icon-button .wald-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* --------------------------------------------------------------------------
   2. The frame
   Square corners, one rule, one step in tint: the brand's way of separating
   things without a shadow.
   -------------------------------------------------------------------------- */

.wald-atlas__frame {
	border: 1px solid var(--wald-border);
	background: var(--wald-surface);
}

.wald-atlas__empty {
	border: 1px solid var(--wald-border);
	background: var(--wald-surface-2);
	padding: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
}

.wald-atlas__toolbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wald-border);
}

.wald-views {
	display: flex;
	flex-shrink: 0;
	border: 1px solid var(--wald-border);
	border-radius: var(--wald-radius);
	overflow: hidden;
}

.wald-view {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	font-size: var(--wald-label);
	font-weight: 600;
	color: var(--wald-ink-muted);
}

.wald-view + .wald-view {
	border-left: 1px solid var(--wald-border);
}

.wald-view:hover {
	background: var(--wald-surface-2);
}

/* The chosen view is marked by its filled ground AND by aria-pressed: colour
   is never the only carrier of the information (RGAA 3.1). */
.wald-view.is-current {
	color: var(--wald-surface);
	background: var(--wald-primary);
}

.wald-topics {
	display: flex;
	flex: 1;
	gap: 0.375rem;
	min-width: 0;
	overflow-x: auto;
}

.wald-topic {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	padding: 0.5rem 0.75rem;
	font-size: var(--wald-label);
	font-weight: 600;
	white-space: nowrap;
	color: var(--wald-ink-muted);
	border: 1px solid transparent;
	border-radius: var(--wald-radius);
}

.wald-topic:hover {
	background: var(--wald-surface-2);
}

.wald-topic.is-current {
	color: var(--wald-primary-dark);
	background: var(--wald-primary-soft);
	border-color: var(--wald-primary);
}

.wald-atlas__search-toggle {
	margin-left: auto;
}

.wald-search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.75rem 1rem;
	background: var(--wald-surface-2);
	border-bottom: 1px solid var(--wald-border);
}

.wald-search label {
	font-size: var(--wald-label);
	font-weight: 600;
}

.wald-search input {
	flex: 1;
	min-width: 12rem;
}

/* --------------------------------------------------------------------------
   3. Map and panel, side by side
   -------------------------------------------------------------------------- */

.wald-atlas__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
}

/* In gallery view the panel is hidden; the map column then takes the width,
   and its dividing rule would otherwise hang in mid-air. */
.wald-atlas__body:has(> .wald-featured:not([hidden])) .wald-atlas__main {
	border-right: 1px solid var(--wald-border);
}

.wald-atlas__body:has(> .wald-featured[hidden]) {
	grid-template-columns: minmax(0, 1fr);
}

.wald-atlas__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.wald-stage {
	position: relative;
	height: 30rem;
	background: var(--wald-surface-2);
}

.wald-stage__map {
	width: 100%;
	height: 100%;
	z-index: 1;
	background: var(--wald-surface-2);
}

/* The tiles are calmed down so that the markers, in institutional blue, keep
   the eye. Not a filter of taste: at full saturation the red of a main road
   read as an alert, and red is reserved for alerts on this site. */
.wald-atlas .leaflet-tile-pane {
	filter: saturate(0.6);
}

.wald-atlas .leaflet-container {
	font-family: inherit;
	font-size: var(--wald-label);
}

.wald-atlas .leaflet-control-attribution {
	background: color-mix(in srgb, var(--wald-surface) 92%, transparent);
	color: var(--wald-ink-muted);
	font-size: 0.75rem;
}

.wald-atlas .leaflet-control-attribution a {
	color: var(--wald-primary);
}

.wald-atlas .leaflet-control-scale-line {
	border-color: var(--wald-border-strong);
	color: var(--wald-ink-muted);
	background: color-mix(in srgb, var(--wald-surface) 80%, transparent);
	font-size: 0.75rem;
}

.wald-stage__controls {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 500;
	display: flex;
	flex-direction: column;
	background: var(--wald-surface);
	border: 1px solid var(--wald-border);
	border-radius: var(--wald-radius);
}

.wald-stage__controls .wald-icon-button + .wald-icon-button {
	border-top: 1px solid var(--wald-border-soft);
}

.wald-stage__legend {
	position: absolute;
	left: 0.75rem;
	bottom: 2.25rem;
	z-index: 500;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0.375rem 0.625rem;
	font-size: var(--wald-label);
	color: var(--wald-ink-muted);
	background: var(--wald-surface);
	border: 1px solid var(--wald-border);
	border-radius: var(--wald-radius);
	pointer-events: none;
}

.wald-stage__legend .wald-dot + * {
	margin-right: 0.5rem;
}

.wald-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wald-primary);
	flex-shrink: 0;
}

/* An unconfirmed position is drawn hollow and dashed: told apart by shape,
   not by colour. */
.wald-dot--approximate {
	background: var(--wald-surface);
	border: 1px dashed var(--wald-primary);
}

.wald-stage__notice {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 5rem;
	z-index: 600;
	margin: 0;
	padding: 0.75rem 1rem;
	font-size: var(--wald-label);
	background: var(--wald-primary-soft);
	border: 1px solid var(--wald-primary);
}

/* Nothing in view, rather than nothing at all. Said in the middle of the map,
   where the reader is looking, and beside the button that undoes it. */
.wald-stage__notice--empty {
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: calc(100% - 2rem);
	text-align: center;
}

/* --------------------------------------------------------------------------
   4. Markers
   A point at the real location, a photograph set aside where there was room,
   and a line between the two. The line is what makes the displacement honest:
   without it, a photograph moved eighty pixels is simply in the wrong place.
   -------------------------------------------------------------------------- */

.wald-atlas .wald-marker {
	background: none;
	border: 0;
	cursor: pointer;
}

.wald-marker__point {
	position: absolute;
	top: -0.25rem;
	left: -0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wald-primary);
	outline: 2px solid var(--wald-surface);
}

/* An unconfirmed position is drawn hollow and dashed, and its cable dashed
   with it: told apart by shape, not by colour (RGAA 3.1). See .wald-cable. */
.wald-marker.is-approximate .wald-marker__point {
	background: var(--wald-surface);
	border: 1px dashed var(--wald-primary);
	outline-width: 1px;
}

/*
 * Every cable is drawn in one layer, below every photograph.
 *
 * They used to live inside their own marker. Leaflet writes a z-index on each
 * marker, which makes it a stacking context, so a cable could not pass behind
 * a neighbour's photograph however it was ordered — it passed across it. One
 * layer under the markers is the only arrangement in which a cable can go
 * behind anything.
 */
.wald-cables {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: visible;
	pointer-events: none;
	transition: opacity 0.15s linear;
}

/*
 * Hidden for the length of a zoom. Leaflet moves the markers to where they are
 * going and scales the whole pane to carry them there; a line still drawn in
 * the old coordinates wanders for a quarter of a second and then snaps.
 */
.wald-cables.is-zooming {
	opacity: 0;
}

.wald-cable {
	stroke: var(--wald-border-strong);
	stroke-width: 1.5;
}

/* An unconfirmed position is drawn dashed, like its point: told apart by
   shape, not by colour (RGAA 3.1). */
.wald-cable--approximate {
	stroke-dasharray: 3 3;
}

.wald-cable--current {
	stroke: var(--wald-primary);
	stroke-width: 2;
}

.wald-cable--folded {
	display: none;
}

/*
 * The card is centred on the offset the script computed, and glides to it.
 *
 * A zoom used to teleport all nine photographs, some three hundred pixels
 * each, four hundred and ninety milliseconds after the click — long enough
 * after the zoom had ended to read as something else happening. A pan is
 * unaffected: it moves the marker, not the offset, so nothing here changes and
 * nothing glides.
 */
.wald-marker__card {
	position: absolute;
	top: var(--wald-y);
	left: var(--wald-x);
	transform: translate(-50%, -50%);
	width: max-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition:
		top 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
		left 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.wald-marker__card {
		transition: none;
	}
}

.wald-marker__image {
	display: block;
	width: 4.5rem;
	height: 3.375rem;
	overflow: hidden;
	border: 2px solid var(--wald-surface);
	outline: 1px solid var(--wald-border-strong);
}

/*
 * Only the card being read says its name.
 *
 * Nine names around points clustered in a village centre do not fit — measured,
 * they collided a hundred and seventy times across eight window widths. The
 * photograph is what the reader recognises anyway; the name is on the marker
 * itself for the pointer and for a screen reader, and in the panel as soon as
 * a card is chosen.
 */
.wald-marker__label {
	/*
	 * Out of the flow, so that the card measures the same whether or not it
	 * says its name. In the flow, choosing a story changed the size of one
	 * card, which changed the room the track had to leave, which moved all
	 * nine photographs — measured at up to three hundred pixels each, in the
	 * forty milliseconds after the click.
	 */
	position: absolute;
	top: calc(100% + 0.3125rem);
	left: 50%;
	transform: translateX(-50%);
	display: none;
	max-width: 8.75rem;
	padding: 0.125rem 0.4375rem;
	font-size: var(--wald-label);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--wald-surface);
	border: 1px solid var(--wald-border);
	border-radius: var(--wald-radius);
}

/* The number of stories on this place, riding with the name. */
.wald-marker__label b {
	margin-left: 0.375rem;
	padding: 0 0.25rem;
	font-size: 0.75rem;
	background: var(--wald-surface-2);
	border-radius: 2px;
}

.wald-marker:hover .wald-marker__image {
	outline-color: var(--wald-primary);
}

/*
 * Drawn larger without being larger: the photograph is scaled, which paints
 * bigger and lays out the same. Growing it for real moved the whole map at
 * every click. The scale stays inside the seven pixels of air the placing
 * leaves around each card, so it cannot reach a neighbour.
 */
.wald-marker.is-current .wald-marker__image {
	transform: scale(1.14);
	outline: 2px solid var(--wald-primary);
}

.wald-marker.is-current .wald-marker__label {
	display: block;
	color: var(--wald-surface);
	background: var(--wald-primary);
	border-color: var(--wald-primary);
}

.wald-marker.is-current .wald-marker__label b {
	color: var(--wald-primary-dark);
	background: var(--wald-surface);
}

/*
 * Nowhere to put the photograph: the marker folds back to its point.
 *
 * It happens on a telephone, and on a map zoomed until the points bunch
 * against an edge. The point keeps its name, its click and its place; the
 * photograph is one click away, in the panel. This is what makes "the cards
 * never overlap" a promise rather than a hope.
 */
.wald-marker.is-folded .wald-marker__card,
.wald-marker.is-folded .wald-marker__point {
	top: -0.3125rem;
	left: -0.3125rem;
	width: 0.625rem;
	height: 0.625rem;
}

.wald-marker.is-folded:hover .wald-marker__point {
	background: var(--wald-primary-dark);
}

.wald-marker:focus-visible {
	outline: none;
}

.wald-marker:focus-visible .wald-marker__label {
	outline: 2px solid var(--wald-primary-dark);
	outline-offset: 2px;
}

@media (max-width: 48rem) {
	/*
	 * The legend leaves the map and sits under it.
	 *
	 * On a 340-pixel map it ran 302 pixels across — the whole bottom edge,
	 * where the photographs stand. Taking each piece of the map's furniture
	 * away in turn and placing the cards again, the legend alone cost two
	 * photographs of nine; the zoom buttons and the attribution cost nothing,
	 * standing in corners the track can do without.
	 *
	 * Wrapping it onto two lines was tried and gained nothing: half as wide and
	 * twice as tall, blocking the left edge instead of the bottom one. Below
	 * the map it costs some thirty pixels of height and gives back an edge.
	 */
	.wald-stage {
		display: flex;
		flex-direction: column;
	}

	.wald-stage__map {
		flex: 1;
		height: auto;
		min-height: 0;
	}

	.wald-stage__legend {
		position: static;
		flex: 0 0 auto;
		padding: 0.5rem 0.75rem;
		border: 0;
		border-top: 1px solid var(--wald-border);
		border-radius: 0;
	}

	.wald-marker__image {
		width: 3.25rem;
		height: 2.5rem;
	}

	.wald-marker__label {
		max-width: 8rem;
	}
}

/* --------------------------------------------------------------------------
   5. The time slider
   -------------------------------------------------------------------------- */

.wald-timeline {
	padding: 1rem 1.25rem 1.25rem;
	border-top: 1px solid var(--wald-border);
}

.wald-timeline__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.wald-period {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.625rem;
	font-size: var(--wald-label);
	font-weight: 600;
	color: var(--wald-primary-dark);
	background: var(--wald-primary-soft);
	border-radius: var(--wald-radius);
}

.wald-timeline input[type="range"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	appearance: none;
	cursor: ew-resize;
}

.wald-timeline input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	background: var(--wald-border);
}

.wald-timeline input[type="range"]::-moz-range-track {
	height: 2px;
	background: var(--wald-border);
}

/* The handle is 1rem across and outlined: WCAG 2.5.8 asks for a target of at
   least 24px, which the padding of the track area provides. */
.wald-timeline input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 1rem;
	height: 1rem;
	margin-top: -0.4375rem;
	border-radius: 50%;
	background: var(--wald-primary);
	border: 2px solid var(--wald-surface);
	outline: 1px solid var(--wald-primary);
}

.wald-timeline input[type="range"]::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--wald-primary);
	border: 2px solid var(--wald-surface);
	outline: 1px solid var(--wald-primary);
}

.wald-timeline__labels {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: var(--wald-label);
	color: var(--wald-ink-subtle);
}

/* --------------------------------------------------------------------------
   6. The gallery
   -------------------------------------------------------------------------- */

.wald-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.5rem 1.25rem;
	align-content: start;
	margin: 0;
	padding: 1.25rem;
	list-style: none;
	background: var(--wald-canvas);
}

/* In map view the gallery is hidden, but the map column keeps its height. In
   gallery view the list scrolls inside the frame rather than stretching the
   page past the panel beside it. */
.wald-atlas__body:has(> .wald-featured[hidden]) .wald-gallery {
	max-height: 40rem;
	overflow-y: auto;
}

.wald-card {
	position: relative;
	min-width: 0;
}

.wald-card__frame {
	position: relative;
	height: 10rem;
	margin-bottom: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--wald-border-soft);
}

.wald-card__date {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.25rem 0.5rem;
	font-size: var(--wald-label);
	font-weight: 600;
	color: var(--wald-surface);
	background: var(--wald-primary-dark);
}

.wald-card__title {
	margin: 0.25rem 0 0;
	font-family: var(--wald-face-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wald-primary-dark);
}

.wald-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole card follows the title's link, without nesting a link inside a
   link — the technique the theme uses for its own cards. */
.wald-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wald-card:hover .wald-card__title a {
	text-decoration: underline;
}

.wald-card:has(a:focus-visible) {
	outline: 2px solid var(--wald-primary);
	outline-offset: 2px;
}

.wald-card:has(a:focus-visible) a:focus-visible {
	outline: none;
}

.wald-atlas__count {
	margin: 0;
	padding: 0.75rem 1.25rem;
	font-size: var(--wald-label);
	color: var(--wald-ink-muted);
	border-top: 1px solid var(--wald-border);
}

.wald-empty {
	grid-column: 1 / -1;
	padding: 2rem 1rem;
	text-align: center;
	color: var(--wald-ink-muted);
}

.wald-empty .wald-icon {
	width: 2rem;
	height: 2rem;
	margin: 0 auto 0.75rem;
	color: var(--wald-ink-subtle);
}

.wald-empty p {
	margin: 0 0 0.5rem;
	font-size: var(--wald-body);
}

.wald-empty .wald-button {
	margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   7. The panel: one story, at length
   -------------------------------------------------------------------------- */

.wald-featured {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.25rem;
	background: var(--wald-canvas);
}

.wald-featured__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.wald-featured__index {
	margin: 0;
	font-size: var(--wald-label);
	font-variant-numeric: tabular-nums;
	color: var(--wald-ink-subtle);
}

.wald-featured__image {
	position: relative;
	display: block;
	width: 100%;
	height: 12rem;
	overflow: hidden;
	border: 1px solid var(--wald-border-soft);
}

.wald-featured__count {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	font-size: var(--wald-label);
	font-weight: 600;
	color: var(--wald-surface);
	background: var(--wald-primary-dark);
}

.wald-featured__siblings {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wald-border-soft);
}

.wald-featured__siblings p {
	margin: 0 0 0.5rem;
	font-size: var(--wald-label);
	color: var(--wald-ink-muted);
}

.wald-featured__siblings > div {
	display: flex;
	gap: 0.375rem;
	overflow-x: auto;
}

.wald-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 3rem;
	height: 2.5rem;
	border: 2px solid transparent;
	outline: 1px solid var(--wald-border);
}

.wald-thumb.is-current {
	border-color: var(--wald-primary);
	outline-color: var(--wald-primary);
}

.wald-featured__text {
	padding-top: 1rem;
}

.wald-featured__title {
	margin: 0.5rem 0 0.75rem;
	font-family: var(--wald-face-heading);
	font-size: var(--wald-heading-md);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wald-primary-dark);
}

.wald-featured__text p {
	margin: 0 0 0.75rem;
	font-size: var(--wald-body);
	line-height: 1.6;
	color: var(--wald-ink-muted);
}

.wald-featured__place {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--wald-label) !important;
}

.wald-featured .wald-button {
	width: 100%;
}

.wald-featured__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--wald-border-soft);
}

/* --------------------------------------------------------------------------
   8. Contribution
   -------------------------------------------------------------------------- */

.wald-atlas__contribute {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-wrap: wrap;
	margin: 1rem 0 0;
	padding: 0.875rem 1rem;
	font-size: var(--wald-body);
	background: var(--wald-primary-soft);
	border-left: 3px solid var(--wald-primary);
}

/* --------------------------------------------------------------------------
   9. The photograph viewer
   -------------------------------------------------------------------------- */

.wald-dialog {
	width: min(58rem, 92vw);
	max-height: 90dvh;
	padding: 0;
	overflow: hidden;
	color: var(--wald-ink);
	background: var(--wald-surface);
	border: 1px solid var(--wald-border-strong);
	overscroll-behavior: contain;
}

.wald-dialog::backdrop {
	background: rgb(0 30 73 / 65%);
}

.wald-dialog__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	background: var(--wald-surface);
	border: 1px solid var(--wald-border);
}

.wald-dialog__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-height: 90dvh;
}

.wald-dialog__photo {
	position: relative;
	min-height: 22rem;
	background: var(--wald-surface-2);
}

.wald-dialog__photo img {
	position: absolute;
	inset: 0;
	object-fit: contain;
}

.wald-dialog__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0.375rem 0.625rem;
	font-size: var(--wald-label);
	color: var(--wald-surface);
	background: var(--wald-primary-dark);
}

.wald-dialog__text {
	padding: 2rem 1.5rem 1.5rem;
	overflow-y: auto;
}

.wald-dialog__text h2 {
	margin: 0.5rem 0 0.75rem;
	font-family: var(--wald-face-heading);
	font-size: var(--wald-heading-md);
	font-weight: 800;
	line-height: 1.2;
	color: var(--wald-primary-dark);
}

.wald-dialog__text p {
	margin: 0 0 1rem;
	color: var(--wald-ink-muted);
}

.wald-dialog__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
	gap: 0.375rem;
	max-height: 11rem;
	overflow-y: auto;
	margin-bottom: 1.25rem;
}

.wald-dialog__thumbs .wald-thumb {
	width: 100%;
	height: 3.5rem;
}

/* --------------------------------------------------------------------------
   10. Narrow screens
   The panel goes under the map, then the toolbar wraps. Nothing is hidden:
   what a visitor can do on a desktop, they can do on a telephone.
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
	.wald-atlas__body,
	.wald-atlas__body:has(> .wald-featured:not([hidden])) {
		grid-template-columns: minmax(0, 1fr);
	}

	.wald-atlas__body:has(> .wald-featured:not([hidden])) .wald-atlas__main {
		border-right: 0;
		border-bottom: 1px solid var(--wald-border);
	}

	.wald-stage {
		height: 24rem;
	}

	.wald-featured__image {
		height: 14rem;
	}
}

@media (max-width: 48rem) {
	.wald-atlas__toolbar {
		flex-wrap: wrap;
	}

	.wald-topics {
		order: 3;
		width: 100%;
		flex-basis: 100%;
	}

	.wald-atlas__search-toggle {
		margin-left: auto;
	}

	.wald-stage {
		height: 20rem;
	}

	.wald-dialog__body {
		grid-template-columns: 1fr;
		overflow-y: auto;
	}

	.wald-dialog__photo {
		min-height: 16rem;
	}
}