/* Generic layout/typography/buttons for re-use across templates */

.pm-container { width: min(92vw, 980px); margin: 0 auto; }
.pm-pad { padding: 1.25rem 0; }
/* Unified page-title spec (v0.6.16).
 *
 * Previously `.pm-title` lived on `<h1>` in most templates and
 * `.ap-header__title` lived on `<h2>` in the All People template,
 * and each inherited its own browser-default size/weight (h1 ≈ 2em
 * bold; h2 ≈ 1.5em bold; plus All People forced weight 900). Result:
 * every page title looked like it came from a slightly different
 * design system.
 *
 * Rather than churn semantic tags across six templates, we normalise
 * the look here: same font-size, same lighter weight. Whether the
 * markup is `<h1 class="pm-title">` or `<h2 class="ap-header__title">`
 * the rendered result is identical. The All People-specific rule in
 * `css/all-people.css` has been trimmed so it no longer fights this. */
.pm-title,
.ap-header__title {
	margin: 0 0 0.4rem;
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

/* Site-title wordmark in the header (replaces the previous literal
 * "Home" text in `header.php`). On map templates this element is
 * either hidden (`.pm-svg-framed`) or restyled as a dark pill
 * (`.map-template-3`, `.map-template-svg`) — those more specific
 * selectors still win where they apply. The rules below are the
 * fallback for regular pages (contact, all-people, singular CPT
 * views), which previously just rendered a default underlined blue
 * link because no base style existed. */
.map-home {
	color: #000;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	transition: color 0.12s ease;
}
.map-home:hover,
.map-home:focus-visible { color: #555; outline: none; }
.pm-meta { color: #555; }
.pm-content p { margin: 0 0 1rem; }
.pm-hero img { width: 100%; height: auto; display: block; border-radius: 12px; }
.pm-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pm-header-main { min-width: 0; }
.pm-hero--small { width: 160px; flex: 0 0 160px; }
.pm-hero--small img { border-radius: 10px; }
.pm-hero--circle { width: clamp(160px, 28vw, 220px); aspect-ratio: 1 / 1; border-radius: 999px; overflow: hidden; display: grid; place-items: center; padding: 10px 40px; background: #ccc; border: 1px solid rgba(0,0,0,0.08); }
.pm-hero--circle img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.pm-sep { border: 0; height: 1px; background: rgba(0,0,0,0.08); margin: 1rem 0; }
.pm-actions { display: flex; justify-content: flex-start; align-items: center; gap: 0.75rem; }
.pm-button { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem; border-radius: 8px; text-decoration: none; background: #111; color: #fff; }
.pm-button:hover { background: #000; }
.pm-button__thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; display: inline-block; }
.pm-button__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Location excerpt — sits below main content in right column, line breaks honoured */
.pm-excerpt { color: #444; font-style: italic; line-height: 1.6; }

/* Supporting images gallery — stacks full-width in left column, natural proportions */
.pm-supporting-gallery { display: flex; flex-direction: column; gap: 0.5rem; }
.pm-supporting-gallery__item { display: block; border-radius: 8px; overflow: hidden; }
.pm-supporting-gallery__item img { width: 100%; height: auto; display: block; transition: transform 240ms ease; }
.pm-supporting-gallery__item:hover img { transform: scale(1.02); }

/* Two-column layout */
.pm-grid { display: grid; gap: 1rem; }
.pm-grid--two { grid-template-columns: 1fr 2fr; align-items: start; }
.pm-col--left { display: grid; gap: 1rem; }
.pm-col--right { display: grid; gap: 1rem; }
.pm-subtitle { margin: 0; font-size: clamp(1.125rem, 2.4vw, 1.5rem); }
.pm-list { list-style: none; margin: 0; padding: 0; }
.pm-list--people { display: grid; gap: 0.5rem; }

/* Person: bio left, exhibitions right */
.pm-person-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.pm-person-panel { min-width: 0; }

@media (max-width: 900px) {
	.pm-person-panels { grid-template-columns: 1fr; }
}

/* People avatars list */
.pm-avatars { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.pm-avatar { width: 48px; height: 48px; border-radius: 999px; position: relative; overflow: visible; }
.pm-avatar a { width: 100%; height: 100%; display: block; border-radius: 999px; overflow: hidden; border: 2px solid rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.pm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-avatar--contain a { background: #ccc; padding: 4px; box-sizing: border-box; }
.pm-avatar--contain img { object-fit: contain; }
.pm-avatars--large .pm-avatar { width: 72px; height: 72px; }

/* Avatar hover label (match map tooltip style) */
.pm-avatar a[data-hover]::after {
	content: attr(data-hover);
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, -10px);
	background: rgba(0,0,0,0.78);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
	z-index: 20;
}
.pm-avatar a[data-hover]:hover::after,
.pm-avatar a[data-hover]:focus-visible::after { opacity: 1; }

/*
 * Headshot normalisation — always render People headshots in greyscale.
 *
 * The project's People featured images come from a mix of archival sources
 * (some colour, most black & white) and looked inconsistent when shown side
 * by side. Every surface that renders a Person thumbnail flattens it to a
 * single visual treatment so the whole site shares one look.
 *
 * TWEAKING / DISABLING THE FILTER
 * -------------------------------
 * The filter value is held in the `--pm-person-filter` custom property
 * below. Change it once here and every Person headshot across the site
 * (map markers, modal, search panel, single-person hero, all-people cards,
 * bubbles, coming-soon tiles, …) follows automatically. Set it to `none`
 * to disable the effect everywhere; combine functions for richer looks,
 * e.g. `grayscale(1) contrast(1.08)` for a punchier B&W.
 *
 * WHERE THE RULES LIVE
 * --------------------
 * The selector list further down enumerates every non-map context in
 * which a Person thumbnail renders — scoped to person-only selectors so
 * we don't accidentally drain colour from Location/Region hero images,
 * which share generic wrappers like `.pm-hero` and `.pm-avatar`. The
 * map-specific contexts (`.map-person` markers and the `.map-modal__thumb`
 * when the modal was opened for a person) live in
 * `css/map-template-3.css` so they can compose cleanly with the existing
 * `drop-shadow` on the selected marker. Both files reference the same
 * `--pm-person-filter` token — if you add a new headshot surface, list
 * it in one of the two rules, also using `var(--pm-person-filter)`.
 *
 * Non-map contexts covered below:
 *   - body.single-person
 *       .pm-person__hero-image img        Single-person template hero (scoped by
 *                                         body class so location/region heroes,
 *                                         which share `.pm-hero--circle`, stay
 *                                         in colour).
 *   - .pm-bubble__item img                Connected-people bubbles grid.
 *   - .ap-card__image img                 All-People directory cards.
 *   - .ap-modal__avatar-img img           All-People connections modal avatars.
 *   - .pm-avatar--person img              Contextual avatars list (opt-in via
 *                                         modifier in person-bearing lists).
 *   - .map-people-panel__thumb            People-search panel on the map
 *                                         (sibling of the map markers, but
 *                                         lives in floating chrome rather
 *                                         than on the map canvas).
 *   - .cs-grid__circle img                Coming-soon page background tile.
 */
:root {
	/* Canonical Person-headshot filter. See block comment above for full
	   rationale and override instructions. */
	--pm-person-filter: grayscale(1);
}
body.single-person .pm-person__hero-image img,
.pm-bubble__item img,
.ap-card__image img,
.ap-modal__avatar-img img,
.pm-avatar--person img,
.map-people-panel__thumb,
.cs-grid__circle img {
	filter: var(--pm-person-filter);
	-webkit-filter: var(--pm-person-filter);
}

/* Location events */
.pm-events__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pm-event { padding: 0.75rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; background: #fff; }
.pm-event__title { margin: 0 0 0.25rem; font-size: 1.05rem; }
.pm-event__years { margin: 0 0 0.5rem; }
.pm-event__description { color: #333; line-height: 1.6; }

/* People exhibitions grouped by location */
.pm-exhibitions__location { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.pm-exhibitions__location-title { margin: 0; font-size: 1.05rem; }
.pm-exhibitions__location-title a { text-decoration: none; }
.pm-exhibitions__location-title a:hover { text-decoration: underline; }

/* Connected people cards (single person template) */
.pm-related-group { margin-top: 0.75rem; }
.pm-related-group__title { margin: 0 0 0.5rem; font-size: 1rem; opacity: 0.85; }
.pm-related-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pm-related-card__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.625rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; text-decoration: none; }
.pm-related-card__link:hover { background: rgba(0,0,0,0.03); }
.pm-related-card__avatar { width: 44px; height: 44px; border-radius: 999px; overflow: hidden; flex: 0 0 44px; border: 1px solid rgba(0,0,0,0.08); }
.pm-related-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-related-card__meta { display: grid; gap: 2px; min-width: 0; }
.pm-related-card__name { font-weight: 700; line-height: 1.2; }
.pm-related-card__note { color: #555; font-size: 0.95rem; line-height: 1.3; }

/* Footer tidy */
.site-footer { background: #111; color: #fff; border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer__copy { margin: 0; opacity: 0.9; }

/* Global burger & drawer */
/* ------------------------------------------------------------------
 * Burger button + slide-out drawer — unified light treatment (v0.6.15)
 *
 * One button style across the whole site. Used to be two: a dark
 * translucent default (this file) and a white/square override scoped
 * by `.pm-svg-framed` (map-template-svg-framed.css). The framed look
 * won and is now the default — the override has been deleted.
 *
 * Visual language ties into the rest of the site's black/white/square-
 * corner system (map-compass, yearbar, map-key, forms.css submit
 * button): 1px #000 borders, no border-radius, #fff fills, hover state
 * that inverts to black. The drawer panel and its menu links now share
 * the same palette rather than being a dark `#111` island on an
 * otherwise light site. Menu links pick up the same uppercase +
 * letter-spaced treatment used on `.yearbar__range-text`,
 * `.map-key__title`, and the Ninja Forms submit button so navigation
 * reads as part of the same design system.
 *
 * The hamburger → X animation on open is preserved — `html.drawer-open`
 * still triggers it. We keep `.map-drawer__close { display: none }`
 * because the animated button *is* the close affordance when open.
 * ---------------------------------------------------------------- */

.map-menu-btn {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 31;
	width: 40px;
	height: 40px;
	border-radius: 0;
	border: 1px solid #000;
	background: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.15s ease;
}
.map-menu-btn:hover { background: #f2f2f2; }
html.drawer-open .map-menu-btn { z-index: 60; background: #000; }
html.drawer-open .map-menu-btn:hover { background: #111; }

.map-menu-btn__bar {
	position: relative;
	width: 20px;
	height: 2px;
	background: #000;
	transition: background-color 160ms ease;
}
.map-menu-btn__bar::before,
.map-menu-btn__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: #000;
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		top 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 160ms ease;
}
.map-menu-btn__bar::before { top: -6px; }
.map-menu-btn__bar::after { top: 6px; }

/* Open state: button inverts to black, bars become white and collapse
 * into an X. Bars and their ::before/::after pseudos all share the
 * same colour transition so the inversion reads as a single gesture. */
html.drawer-open .map-menu-btn__bar { background: transparent; }
html.drawer-open .map-menu-btn__bar::before,
html.drawer-open .map-menu-btn__bar::after { background: #fff; }
html.drawer-open .map-menu-btn__bar::before { top: 0; transform: rotate(45deg); }
html.drawer-open .map-menu-btn__bar::after { top: 0; transform: rotate(-45deg); }

/* Drawer container + state machine (driven by aria-hidden). */
.map-drawer { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.map-drawer[aria-hidden="true"] .map-drawer__backdrop { opacity: 0; pointer-events: none; }
.map-drawer[aria-hidden="true"] .map-drawer__panel { transform: translateX(100%); }
.map-drawer[aria-hidden="false"] { pointer-events: auto; }
.map-drawer[aria-hidden="false"] .map-drawer__backdrop { opacity: 1; }
.map-drawer[aria-hidden="false"] .map-drawer__panel { transform: translateX(0); }

.map-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.map-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	background: #fff;
	color: #000;
	border-left: 1px solid #000;
	transform: translateX(100%);
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	padding: 16px;
	overflow: auto;
	box-sizing: border-box;
}

/* The animated burger → X button serves as the close affordance, so
 * the fallback close button is hidden. JS still wires it up in case
 * a future template decides to show it. */
.map-drawer__close { display: none; }

/* Nav menu: uppercase + letter-spaced treatment matches the design
 * tokens on yearbar / map-key / forms submit. 48px top margin leaves
 * clear space under the burger button so the first link doesn't sit
 * awkwardly close to the top-right button. */
.map-drawer__menu {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
.map-drawer__menu a {
	display: block;
	padding: 0.65rem 0.5rem;
	color: #000;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	border-radius: 0;
	transition: background 0.12s ease, color 0.12s ease;
}
.map-drawer__menu a:hover,
.map-drawer__menu a:focus-visible {
	background: #000;
	color: #fff;
	outline: none;
}
/* Current-page link gets a visible marker so the drawer doubles as a
 * breadcrumb. WordPress outputs `.current-menu-item` on the <li>. */
.map-drawer__menu .current-menu-item > a { background: #000; color: #fff; }

@media (max-width: 720px) {
	.pm-grid--two { grid-template-columns: 1fr; }
	.pm-col--left, .pm-col--right { order: unset; }
}