/*
Theme Name: Affacts
Theme URI: https://cordis.europa.eu/project/id/101220216
Description: Child theme for the AFfacts project website (ERC / University of Amsterdam). "Puls Kompakt" design: interactive contour hero, Research notes (posts), Events, Network and Contact, with a Colour / Black switch. Built on Kadence.
Author: AFfacts project
Template: kadence
Version: 1.2.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v3.0 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: afx
*/

/* ==========================================================================
   Design tokens
   Variant 1 "Colour" (default): text and headings in the original blue,
   labels and contour lines in coral. Variant 2 "Black" (the earlier "Den"
   colourway) is set by data-tone="black" on <html> — everything black,
   contour lines included. --bg comes from the Customizer (AFfacts look →
   Background) as an inline style, see inc/customizer.php.
   ========================================================================== */

:root {
	--bg: #f9f8f6;
	--ink: #2531c8;          /* headings, logo, outlines */
	--text: #2531c8;         /* running text */
	--muted: #4d5287;        /* captions, secondary */
	--line: rgba(37, 49, 200, .22);
	--rule: #2531c8;         /* strong section rules */
	--contour: #e8604c;      /* coral pen: contour lines, numbers, labels */
	--label: #2531c8;
	--ph-bg: #e6e5f0;
	--tint: rgba(37, 49, 200, .06);
	--lw: 1.3;
	--pad: clamp(16px, 3vw, 44px);
	color-scheme: light;

	--f-display: 'Unbounded', 'Arial Black', Arial, sans-serif;
	--f-para: 'Spectral', Georgia, 'Times New Roman', serif;
	--f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

:root[data-tone="black"] {
	--ink: #121211;
	--text: #121211;
	--muted: #55544f;
	--line: rgba(18, 18, 17, .2);
	--rule: #121211;
	--contour: #121211;
	--label: #121211;
	--ph-bg: #e4e3dd;
	--tint: rgba(18, 18, 17, .06);
}

/* ==========================================================================
   Kadence integration
   Kadence drives buttons, links and the block-editor colour swatches from its
   own --global-paletteN variables; re-point them at our tokens so everything
   follows the same system (and the Colour / Black switch). The !important
   only exists to win over Kadence's own generated inline CSS.
   ========================================================================== */

:root,
:root[data-tone="black"] {
	--global-palette1: var(--ink) !important;
	--global-palette2: var(--contour) !important;
	--global-palette3: var(--ink) !important;
	--global-palette4: var(--text) !important;
	--global-palette5: var(--muted) !important;
	--global-palette6: var(--muted) !important;
	--global-palette7: var(--bg) !important;
	--global-palette8: var(--bg) !important;
	--global-palette9: var(--bg) !important;
	--global-palette-highlight: var(--ink) !important;
	--global-palette-highlight-alt: var(--contour) !important;
	--global-palette-btn: var(--bg) !important;
	--global-palette-btn-bg: var(--ink) !important;
	--global-body-font-family: var(--f-para) !important;
	--global-heading-font-family: var(--f-display) !important;
}

/* Kadence prints its own body font/background after this file — same
   specificity, so these need !important to stick. */
html body,
.site,
#wrapper,
#inner-wrap,
.content-bg,
body.content-style-unboxed .site {
	background: var(--bg) !important;
	color: var(--text);
}

body {
	font: 400 18px/1.55 var(--f-para) !important;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}

#inner-wrap {
	padding: 0 !important;
	margin: 0 !important;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   Base
   ========================================================================== */

.pg,
.pg *,
#masthead *,
#colophon * {
	box-sizing: border-box;
}

.pg a { color: inherit; }

.pg img { display: block; max-width: 100%; height: auto; }

.pg :focus-visible,
#masthead :focus-visible,
#colophon :focus-visible,
#mobile-drawer :focus-visible {
	outline: 2px solid currentColor !important; /* Kadence removes the outline in the menu; keyboard users must see where they are */
	outline-offset: 3px;
}

.pg details summary { cursor: pointer; list-style: none; }
.pg details summary::-webkit-details-marker { display: none; }

/* The page column: max 1440px, centred, with sizes that scale with the
   page width (cqi) rather than the window, so nothing gets cut off on very
   wide or zoomed-out screens. */
.pg {
	max-width: 1440px;
	margin-inline: auto;
	container-type: inline-size;
}

.pg { overflow: hidden; }

.disp { font-family: var(--f-display); }

/* Gutenberg block resets inside our layout: the block editor adds flow
   margins (block gap), constrained max-widths and, on some setups, an extra
   .wp-block-group__inner-container wrapper. display:contents makes that
   wrapper transparent, so our flex/grid rules apply to the real children.
   Kept before every component rule, so their own margins win. */
.pg .wp-block-group__inner-container { display: contents; }
.pg :where(.is-layout-flow, .is-layout-constrained) > * { margin-block: 0; }
.pg .is-layout-constrained > :where(*) { max-width: none; }
.pg :where(.wp-block-group, .wp-block-image) { margin: 0; }
.pg :where(h1, h2, h3, h4, p, figure, ol, ul, dl) { margin-top: 0; }

.lab {
	font: 500 11.5px/1.3 var(--f-mono);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--label);
	margin: 0 0 12px;
}


/* ==========================================================================
   Header — Kadence Header Builder (Logo · Primary menu · HTML [afx_toggles];
   mobile: Logo · HTML [afx_toggles] · menu button → drawer, from 1080px)
   ========================================================================== */

#masthead,
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap,
#masthead .kadence-sticky-header {
	background: var(--bg) !important;
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 1px solid var(--line);
}

#masthead .site-container {
	max-width: 1440px !important;
	padding-inline: var(--pad) !important;
	container-type: inline-size;
}

#masthead .site-main-header-inner-wrap {
	min-height: 0 !important;
	padding-block: 14px;
	gap: 20px;
}

#masthead .site-header-item { margin-right: 0; }
#masthead .site-header-section-right { gap: clamp(16px, 2cqi, 28px); }

/* Logo: the Site Identity image is used as a one-colour shape painted in
   --ink, so it follows the Colour / Black switch (upload a one-colour logo
   with a transparent background — PNG or WebP). */
#masthead .site-branding a.brand {
	display: block;
	height: 32px;
	aspect-ratio: 720 / 206;
	background-color: var(--ink);
	-webkit-mask: var(--afx-logo) left center / contain no-repeat;
	mask: var(--afx-logo) left center / contain no-repeat;
}

#masthead .site-branding a.brand img { opacity: 0; width: 100%; height: 100%; max-height: none !important; }
#masthead .site-branding .site-title-wrap { display: none; }

#masthead .header-navigation .menu {
	gap: 12px clamp(18px, 4cqi, 56px);
	justify-content: flex-end;
}

#masthead .header-navigation li.menu-item > a {
	padding: 0 0 3px;
	font: 500 13px/1 var(--f-mono);
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
	color: var(--ink);
	border-bottom: 1px solid transparent;
}

#masthead .header-navigation li.menu-item > a:hover,
#masthead .header-navigation li.afx-current > a { border-color: currentColor; color: var(--ink); }

#mobile-header .site-branding a.brand { height: 26px; }
#mobile-header .site-main-header-inner-wrap { padding-block: 12px; }

/* Mobile menu button (Kadence) styled as the round burger */
#masthead .menu-toggle-open {
	width: 44px;
	height: 44px;
	padding: 0;
	justify-content: center;
	border: 1px solid var(--ink) !important;
	border-radius: 999px;
	color: var(--ink) !important;
	background: none !important;
}

#masthead .menu-toggle-open .menu-toggle-icon svg { width: 20px; height: 20px; }

/* Mobile drawer (Kadence popup): full screen, the menu as a list */
#mobile-drawer .drawer-inner,
#mobile-drawer.popup-drawer-layout-fullwidth .drawer-inner {
	background: var(--bg) !important;
	color: var(--ink) !important;
}

#mobile-drawer .drawer-header { padding: 14px var(--pad); }
#mobile-drawer .drawer-header .drawer-toggle { color: var(--ink) !important; }
#mobile-drawer .drawer-content { padding: 0 var(--pad) 32px; }
#mobile-drawer .mobile-navigation ul.menu { border-top: 2px solid var(--rule); }
#mobile-drawer .mobile-navigation li + li { border-top: 1px solid var(--line); }
#mobile-drawer .mobile-navigation a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0;
	font: 500 15px/1 var(--f-mono);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ink) !important;
	border: 0;
}

#mobile-drawer .mobile-navigation a:hover,
#mobile-drawer .mobile-navigation .afx-current > a { color: var(--contour) !important; }

/* The two switches ([afx_toggles]) */
.afx-tools { display: inline-flex; align-items: center; gap: 14px; }

.anim,
.tone {
	position: relative;
	appearance: none;
	background: none !important;
	color: var(--ink) !important;
	border: 1px solid currentColor !important;
	border-radius: 999px;
	height: 22px;
	padding: 0;
	cursor: pointer;
	flex: none;
	font: 500 10px/1 var(--f-mono);
	letter-spacing: .06em;
	box-shadow: none !important;
}

.anim { width: 52px; }
.anim .st { position: absolute; top: 50%; transform: translateY(-50%); right: 7px; }
.anim .kn { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; transition: transform .2s; }
.anim[aria-pressed="true"] .st { right: auto; left: 8px; }
.anim[aria-pressed="true"] .kn { transform: translateX(30px); }

.tone { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.tone i { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.tone .c1 { background: #2531c8; border: 1.5px solid #2531c8; }
.tone .c2 { border: 1.5px solid #121211; }
.tone[aria-pressed="true"] .c1 { background: none; }
.tone[aria-pressed="true"] .c2 { background: #121211; }

.anim::after,
.tone::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	white-space: nowrap;
	background: var(--ink);
	color: var(--bg);
	font: 500 11px/1 var(--f-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 9px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}

@media (hover: hover) {
	.anim:hover::after, .tone:hover::after { opacity: 1; }
}
.anim:focus-visible::after, .tone:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.anim .kn, .anim::after, .tone::after { transition: none; }
}

/* ==========================================================================
   Hero — staggered headline over the interactive contour tangle
   ========================================================================== */

.hero {
	position: relative;
	padding: clamp(48px, 8cqi, 120px) var(--pad) 40px;
}

.topo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: multiply;
	touch-action: pan-y;
}

.big {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(28px, 7.6cqi, 124px);
	line-height: .98;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: -.02em;
	color: var(--ink);
}

.big span { display: block; white-space: nowrap; }
.big .r { text-align: right; }
.big .i { padding-left: 14%; }
.big .ir { text-align: right; padding-right: 8%; }

.sub {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 40px;
	margin-top: clamp(48px, 7cqi, 96px);
}

.full { font-size: 18px; line-height: 1.4; margin: 0; max-width: 40ch; font-style: italic; color: var(--ink); }
.lead p { font-size: clamp(17.5px, 1.55cqi, 20px); line-height: 1.5; margin: 0 0 16px; max-width: 56ch; }
.lead p:first-child { font-size: clamp(20px, 1.9cqi, 25px); line-height: 1.32; color: var(--ink); }
.lead p:last-child { margin: 0; }

.hero .count {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
}

.hero .count .lab { margin: 0; }

/* Listing heroes (Research notes, Events) */
.hero--list { padding: clamp(40px, 6cqi, 88px) var(--pad) 28px; }
.hero--list .big { font-size: clamp(40px, 10.5cqi, 176px); line-height: .92; }

/* ==========================================================================
   Section head — strong 2px rule close under the heading
   ========================================================================== */

.sec { padding: clamp(64px, 8.5cqi, 120px) var(--pad) 0; }

.sh {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	border-bottom: 2px solid var(--rule);
	padding-bottom: 12px;
	color: var(--ink);
}

.sh h2 {
	font: 300 clamp(30px, 4.2cqi, 58px)/1 var(--f-display);
	text-transform: uppercase;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--ink);
	text-wrap: balance;
}

.sh p {
	font: 500 12px/1 var(--f-mono);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--contour);
	margin: 0;
	white-space: nowrap;
}

.more2 {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	font: 500 12px/1 var(--f-mono);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ink);
	text-decoration: none;
}

.more2::after { content: ""; width: 34px; height: 1px; background: currentColor; transition: width .25s; }
.more2:hover::after { width: 64px; }
@media (prefers-reduced-motion: reduce) { .more2::after { transition: none; } }

.secfoot { display: flex; justify-content: flex-end; padding-top: 10px; }

/* ==========================================================================
   Project — facts table (with vertical lines) + stages
   ========================================================================== */

.info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.info > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 14px 15px; min-width: 0; }
.info .wide { grid-column: span 4; }
.info .half { grid-column: span 2; }
.info .dt { font: 500 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 6px; }
.info .dd { margin: 0; font-size: 15.5px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.info .wide .dd { font-size: 17px; color: var(--ink); }
.info a { color: var(--ink); text-decoration-color: var(--contour); text-underline-offset: 3px; }

.stages { margin-top: 44px; }
.stage { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; border-top: 2px solid var(--rule); padding: 20px 0 6px; }
.stage .h { display: flex; gap: 14px; align-items: flex-start; }
.stage .num { font: 200 44px/.8 var(--f-display); color: var(--contour); flex: none; width: 36px; margin: 0; }
.stage .lab { margin: 2px 0 6px; color: var(--muted); }
.stage h3 { font: 400 19px/1.15 var(--f-display); text-transform: uppercase; margin: 0; color: var(--ink); }
.prose { columns: 2 300px; column-gap: 48px; }
.prose p { margin: 0 0 16px; font-size: 16px; line-height: 1.62; break-inside: avoid-column; }

/* ==========================================================================
   Three nodes + map
   ========================================================================== */

.nodes { margin-top: 8px; }
.node { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: end; padding: 28px 0; border-bottom: 1px solid var(--line); }
.node:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.node:nth-child(even) .w { order: 2; text-align: right; }
.node .w {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(44px, 10cqi, 148px);
	line-height: .9;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: -.03em;
	color: transparent;
	-webkit-text-stroke: 1.2px var(--contour);
	transition: color .3s;
}
.node:hover .w { color: var(--contour); }
@media (prefers-reduced-motion: reduce) { .node .w { transition: none; } }
.node .place { font: 500 13px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin: 0 0 10px; }
.node .q { font-size: 16px; line-height: 1.62; margin: 0; max-width: 46ch; }

/* Map: grayscale until hovered (mouse) or while in view (touch, set by JS). */
.mapfig { margin: 40px 0 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.mapfig img { width: 100%; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; transition: filter .6s ease; }
@media (hover: hover) { .mapfig:hover img { filter: none; } }
.mapfig.on img { filter: none; }
@media (prefers-reduced-motion: reduce) { .mapfig img { transition: none; } }
.mapfig figcaption { margin: 0; font: 12px/1.5 var(--f-mono); color: var(--muted); text-align: left; }

/* ==========================================================================
   Team — photo | role + name | bio
   ========================================================================== */

.mem { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 2fr); border-bottom: 1px solid var(--line); }
.mem > * { padding: 24px 24px 26px 0; min-width: 0; }
.mem .phw { padding-right: 24px; }
.ph { position: relative; max-width: 180px; margin-right: 14px; }
.ph::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--contour); }
.ph img, .ph .noimg { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; }
.ph img { object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.ph img:not([src]) { background: var(--ph-bg); }
.ph .noimg, .noimg { background: var(--ph-bg); display: flex; align-items: center; justify-content: center; font: 200 48px/1 var(--f-display); color: var(--ink); margin: 0; }
.role { font: 500 11.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--contour); margin: 0 0 10px; }
.mem h3 { font: 300 clamp(26px, 2.7cqi, 40px)/.98 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.bio { padding-left: 24px; }
.bio p { font-size: 16px; line-height: 1.62; margin: 0 0 12px; max-width: 68ch; }
.mem details { margin-top: 14px; }
.mem summary { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 9px 14px; }
.mem summary b { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--contour); color: var(--bg); font-weight: 500; }
.mem summary:hover { background: var(--tint); }
.pubs p, .pubs .pub { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; max-width: none; }
.pubs a { color: var(--ink); text-underline-offset: 3px; }
.stubs { display: flex; flex-wrap: wrap; gap: 10px 48px; border-bottom: 1px solid var(--line); padding: 18px 0; }
.stubs p { margin: 0; font: 300 19px/1.2 var(--f-display); text-transform: uppercase; color: var(--ink); }
.stubs .role { display: block; margin: 0; font: 500 11px/1.8 var(--f-mono); letter-spacing: .1em; color: var(--contour); }

/* ==========================================================================
   Latest research notes (home) — cards with vertical lines
   ========================================================================== */

.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.ncard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.ntop { display: flex; justify-content: space-between; gap: 12px; }
.ntop .lab { margin: 0; }
.ntop .nn { color: var(--contour); }
.lprint { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; display: block; text-decoration: none; }
.lprint canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lprint .lplace { position: absolute; left: 10px; bottom: -4px; font: 300 clamp(34px, 4.2cqi, 60px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px var(--ink); white-space: nowrap; transition: color .3s; }
.lprint:hover .lplace { color: var(--ink); }
.lprint .lc { position: absolute; right: 8px; top: 7px; font: 500 9.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 2px 4px; }
.ncard h3 { margin: 0; font: 300 clamp(20px, 1.75cqi, 25px)/1.08 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.ncard h3 a { text-decoration: none; }
.ncard h3 a:hover { color: var(--contour); }
.ncard .ex { margin: 0; font-size: 16px; line-height: 1.5; }
.rw { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.rw img, .rw .ini { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(1); mix-blend-mode: multiply; }
.ini { background: var(--ph-bg); display: flex; align-items: center; justify-content: center; font: 300 13px/1 var(--f-display); color: var(--ink); mix-blend-mode: normal !important; }
.rw b { display: block; font-weight: 500; font-size: 15px; line-height: 1.2; }
.rw small { display: block; font: 500 10.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* ==========================================================================
   Events — rows (home, archive, related)
   ========================================================================== */

.evrow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 250px 190px; gap: 0 28px; align-items: start; padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.edate { display: flex; gap: 12px; align-items: flex-start; }
.edate .d { font: 200 clamp(52px, 5cqi, 72px)/.8 var(--f-display); color: var(--contour); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.edate .m { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.edate .m b { font: 400 18px/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.edate .lab { margin: 0; }
.etags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.etags .lab { margin: 0; color: var(--contour); }
.evrow h3 { margin: 0 0 10px; font: 300 clamp(22px, 2.2cqi, 32px)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.evrow h3 a { text-decoration: none; }
.evrow h3 a:hover { color: var(--contour); }
.evrow .ds { margin: 0; font-size: 16px; line-height: 1.5; max-width: 56ch; }
.evmore { margin-top: 10px; }
.efd { margin: 0; display: grid; gap: 12px; padding-top: 4px; }
.efd div { display: grid; gap: 3px; }
.efd dt { font: 500 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.efd dd { margin: 0; font-size: 15.5px; line-height: 1.3; }
.efd dd small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); text-decoration: none; white-space: nowrap; justify-self: end; }
.cta:hover { background: var(--tint); }
.cta.fill { background: var(--ink); color: var(--bg); }
.cta.fill:hover { background: var(--contour); border-color: var(--contour); color: var(--bg); }
.cta.tba { border-style: dashed; border-color: var(--line); color: var(--muted); }
.evrow.past .edate .d { color: transparent; -webkit-text-stroke: 1.2px var(--contour); }
.evrow.past h3 { font-size: clamp(20px, 1.8cqi, 26px); }
.evrow.past .more2 { justify-self: end; align-self: start; }
.evsec { padding-top: clamp(64px, 8.5cqi, 120px); }
.empty { padding: 34px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 18px; font-style: italic; color: var(--ink); }

/* ==========================================================================
   Network (block patterns) and Contact
   ========================================================================== */

.ngroup { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px 28px; padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
.ngroup > .lab { margin: 4px 0 0; display: flex; align-items: baseline; gap: 10px; }
.ngroup > .lab b { font-weight: 500; color: var(--contour); }
.nnames { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 40px; }
.nperson h3 { margin: 0; font: 300 19px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); }
.nperson p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 32px; row-gap: 8px; }
.pcell { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 0 18px; min-width: 0; }
.pcell .wp-block-image { height: 84px; display: flex; align-items: center; justify-content: flex-start; margin: 0; }
.pcell .wp-block-image img { max-height: 84px; width: auto; max-width: 80%; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; transition: filter .3s; }
.pcell:hover .wp-block-image img { filter: none; }
.pg .pcell:not(:has(.wp-block-image img[src]))::before { content: ""; height: 84px; } /* no logo yet: keep its space, so the names line up */
.pg .pcell .wp-block-image:not(:has(img[src])) { display: none; } /* (.pg = site only, not the editor) */
.pcell h3 { margin: 0; font: 300 19px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); }
.pcell h3 a { text-decoration: none; }
.pcell h3 a::after { content: " ↗"; font-family: var(--f-mono); font-size: .8em; color: var(--contour); }
.pcell h3 a:hover { color: var(--contour); }

.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.ccell { display: flex; flex-direction: column; padding: 20px 22px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.ccell .role { margin: 0 0 6px; }
.ccell h3 { margin: 0 0 6px; font: 300 22px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; color: var(--ink); }
.ccell p { margin: 0; }
.ccell a { font-size: 18px; color: var(--ink); text-decoration-color: var(--contour); text-underline-offset: 4px; overflow-wrap: anywhere; }
.ccell a:hover { color: var(--contour); }

/* ==========================================================================
   Research notes list
   ========================================================================== */

.nodesel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px clamp(14px, 2.4cqi, 40px); padding: 22px var(--pad) 6px; }
.nodesel a { text-decoration: none; font: 300 clamp(30px, 5.4cqi, 92px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px var(--contour); transition: color .2s; }
.nodesel a:hover { color: var(--contour); }
.nodesel a[aria-current="true"] { color: var(--ink); -webkit-text-stroke: 0; }
.nodesel sup { font: 500 12px/1 var(--f-mono); -webkit-text-stroke: 0; color: var(--label); vertical-align: top; margin-left: 4px; letter-spacing: .06em; }
.minifilters { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 12px var(--pad) 20px; border-bottom: 2px solid var(--rule); }
.minifilters .fgroup { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.minifilters .fgroup .sel { min-width: 0; text-overflow: ellipsis; }
.minifilters .lab { margin: 0; }
.sel { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); background-color: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 7px 28px 7px 11px; min-height: 32px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; max-width: 100%; }
.minifilters .go { appearance: none; background: none; border: 1px solid var(--ink); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.js .minifilters .go { display: none; }
.js .minifilters.kbd .go { display: inline-flex; }
.minifilters .reset { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--contour); }

.list { padding: 0 var(--pad); }

.note-row { position: relative; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 210px; gap: clamp(20px, 3cqi, 44px); align-items: start; padding: clamp(28px, 4cqi, 52px) 0; border-bottom: 1px solid var(--line); isolation: isolate; overflow: hidden; }
.note-row:nth-child(even) { grid-template-columns: 210px minmax(0, 1fr) minmax(150px, 220px); }
.note-row:nth-child(even) .print { order: 3; }
.note-row:nth-child(even) .txt { order: 2; }
.note-row:nth-child(even) .fd { order: 1; text-align: right; }
.note-row .ghost { position: absolute; z-index: -1; left: -.04em; bottom: -.12em; font: 300 clamp(80px, 16cqi, 270px)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; transition: -webkit-text-stroke-color .3s; }
.note-row:nth-child(even) .ghost { left: auto; right: -.04em; }
.note-row:hover .ghost { -webkit-text-stroke-color: var(--contour); }
.print { position: relative; aspect-ratio: 1; width: 100%; max-width: 220px; margin: 0; }
.print canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.print .snap { position: absolute; right: -10px; bottom: -10px; width: 40%; aspect-ratio: 1; border: 1px solid var(--bg); overflow: hidden; }
.print .snap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.note-row .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.note-row .meta .lab { margin: 0; }
.note-row .meta .nnode { color: var(--contour); }
.note-row h2 { margin: 0 0 14px; font: 300 clamp(24px, 3cqi, 46px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; color: var(--ink); }
.note-row h2 a { text-decoration: none; }
.note-row h2 a:hover { color: var(--contour); }
.note-row .ex { margin: 0; font-size: 17px; line-height: 1.5; max-width: 56ch; }
.note-row .more2 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .note-row .ghost { transition: none; } }

.fd { margin: 0; display: grid; gap: 12px; align-content: start; }
.fd div { display: grid; gap: 3px; }
.fd dt { font: 500 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.fd dd { margin: 0; font-size: 16.5px; line-height: 1.3; }
.fd dd small { display: block; font-size: 14px; color: var(--muted); }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 26px var(--pad) 0; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); }
.pager .current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ==========================================================================
   Single note / single event
   ========================================================================== */

.back { display: inline-block; margin: 24px var(--pad) 0; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--ink); }
.back:hover { text-decoration: underline; text-underline-offset: 4px; }

.s-head { position: relative; padding: clamp(22px, 3.5cqi, 48px) var(--pad) clamp(28px, 4cqi, 52px); border-bottom: 2px solid var(--rule); isolation: isolate; min-height: clamp(300px, 38cqi, 540px); overflow: hidden; }
.s-head .place { position: absolute; z-index: -1; right: calc(var(--pad) - .05em); bottom: -.1em; font: 300 clamp(100px, 22cqi, 380px)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px var(--contour); pointer-events: none; opacity: .55; }
.s-head .bigprint { position: absolute; z-index: -2; right: var(--pad); top: clamp(10px, 2cqi, 30px); width: clamp(220px, 34cqi, 500px); aspect-ratio: 1; }
.s-head .bigprint canvas { width: 100%; height: 100%; }
.s-head .lab { margin-bottom: 20px; }
.e-head .lab { margin-bottom: 12px; }
.s-head h1 { margin: 0; font: 300 clamp(32px, 5.2cqi, 88px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.025em; max-width: 14ch; text-wrap: balance; color: var(--ink); }
.e-head { min-height: clamp(260px, 30cqi, 440px); }
.e-head h1 { max-width: 20ch; }

.fieldbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); margin: 0; }
.fieldbar > div { padding: 14px var(--pad) 16px; min-width: 0; }
.fieldbar > div + div { padding-left: 20px; }
.fieldbar dt { font: 500 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.fieldbar dd { margin: 0; font: 300 clamp(17px, 1.6cqi, 22px)/1.15 var(--f-display); text-transform: uppercase; color: var(--ink); }
.fieldbar dd small { display: block; margin-top: 4px; font: 400 15px/1.3 var(--f-para); text-transform: none; color: var(--muted); }
.fieldbar dd a { text-decoration: none; }
.rwho { display: flex; gap: 12px; align-items: center; }
.rwho + .rwho { margin-top: 10px; }
.rwho img, .rwho .ini { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 50%; filter: grayscale(1); mix-blend-mode: multiply; }
.rwho .ini { font-size: 15px; }

.s-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 66ch) minmax(0, 1fr); padding: clamp(36px, 4.5cqi, 64px) var(--pad) 0; }
.rprose { grid-column: 2; min-width: 0; }
.rprose > * { margin: 0 0 1.1em; }
.rprose p, .rprose li { font-size: 17.5px; line-height: 1.66; }
.rprose > p:first-child, .rprose p.lede { font-size: clamp(19.5px, 1.8cqi, 24px); line-height: 1.66; color: var(--ink); }
.rprose p.lede::first-letter { float: left; font: 300 4.4em/.8 var(--f-display); margin: .06em .1em 0 0; color: var(--contour); }
.rprose h2, .rprose h3 { margin: 1.8em 0 .6em; font: 400 19px/1.3 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); }
.rprose a { color: var(--ink); text-decoration-color: var(--contour); text-underline-offset: 3px; }
.rprose figure { margin: 1.6em 0; }
.rprose figcaption { margin-top: 8px; font: 12px/1.5 var(--f-mono); color: var(--muted); }
.rprose img { filter: grayscale(1); }
.rprose .wp-block-embed, .rprose .wp-block-video, .rprose .wp-block-audio { margin: 1.6em 0; }
.rprose .wp-block-audio audio { width: 100%; }

/* Quote block = the large pull quote */
.rprose .wp-block-quote, .rprose blockquote {
	margin: 1.4em 0 1.6em;
	padding: clamp(24px, 3cqi, 36px) 0;
	border: 0;
	border-top: 1px solid var(--contour);
	border-bottom: 1px solid var(--contour);
}
.rprose .wp-block-quote p, .rprose blockquote p { margin: 0; font: 300 clamp(24px, 3cqi, 44px)/1.08 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; color: var(--contour); }
.rprose .wp-block-quote cite, .rprose blockquote cite { display: block; margin-top: 14px; font: 500 11.5px/1.4 var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }

.side { grid-column: 3; grid-row: 1 / span 2; padding-left: clamp(20px, 3cqi, 48px); }
.fig { margin: 0; max-width: 240px; }
.fig img { width: 100%; height: auto; filter: grayscale(1); }
.fig figcaption { margin-top: 8px; font: 12px/1.5 var(--f-mono); color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.tag { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; text-decoration: none; }
.tag:hover { border-color: var(--ink); }
.rel { margin-top: clamp(56px, 7cqi, 100px); }
.rel > .sh { margin: 0 var(--pad); }

/* Program (events) */
.plist, .wp-block-group.plist { list-style: none; margin: 10px 0 0; padding: 0; border-top: 2px solid var(--rule); }
.pit { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.pit > * { margin: 0; }
.rprose .pit p { margin: 0; }
.rprose .pit .ptext, .rprose .pit .psp { margin-top: 6px; }
.rprose .ptime, .ptime { font: 500 13px/1.5 var(--f-mono); color: var(--contour); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rprose .plabel, .plabel { margin: 0; font: 400 16px/1.25 var(--f-display); text-transform: uppercase; color: var(--ink); }
.rprose .ptext, .ptext { margin: 6px 0 0; font-size: 17px; line-height: 1.5; }
.rprose .psp, .psp { margin: 6px 0 0; font: 500 17.5px/1.66 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.eside { padding-top: 6px; }
.regcard { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; border-top: 2px solid var(--rule); padding-top: 14px; }
.regcard .lab { margin: 0; }
.regcard .cta { justify-self: auto; white-space: normal; text-align: center; }

/* ==========================================================================
   Footer — Kadence Footer Builder, one HTML element (Customize → Footer → HTML)
   ========================================================================== */

#colophon,
#colophon .site-footer-row-container-inner {
	background: var(--bg) !important;
	border: 0 !important;
}

#colophon .site-container {
	max-width: 1440px !important;
	padding-inline: var(--pad) !important;
}

#colophon .site-footer-row { padding: 0 !important; }

#colophon .footer-html-inner {
	margin-top: 88px;
	border-top: 2px solid var(--rule);
	padding: 22px 0 40px;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	column-gap: 24px;
	align-content: start;
	text-align: left;
	font: 400 14.5px/1.55 var(--f-para);
	color: var(--text);
}

#colophon .footer-html-inner > * { grid-column: 1; margin: 0 0 14px; max-width: 960px; }
#colophon .footer-html-inner > p:empty { display: none; }
#colophon .afx-flogo img { display: block; width: auto; height: 112px; max-width: 100%; mix-blend-mode: multiply; }
#colophon .afx-disc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
#colophon .afx-copy,
#colophon .afx-footer-links { grid-column: 2; grid-row: 1; text-align: right; font: 12px/1.7 var(--f-mono); color: var(--muted); }
#colophon .afx-footer-links { grid-row: 2; }
#colophon .afx-footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; }
#colophon a { color: var(--ink); text-underline-offset: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.evrow { grid-template-columns: 130px minmax(0, 1fr) 220px; }
	.evrow .cta { grid-column: 2; justify-self: start; margin-top: 16px; }
}

@media (max-width: 980px) {
	.note-row, .note-row:nth-child(even) { grid-template-columns: 140px minmax(0, 1fr); }
	.note-row:nth-child(even) .print, .note-row:nth-child(even) .txt { order: 0; }
	.note-row .fd, .note-row:nth-child(even) .fd { order: 0; grid-column: 2; text-align: left; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fieldbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fieldbar > div:nth-child(3) { padding-left: var(--pad); }
	.fieldbar > div:nth-child(n+3) { border-top: 1px solid var(--line); }
	.s-body { grid-template-columns: minmax(0, 1fr); }
	.rprose { grid-column: 1; }
	.side { grid-column: 1; grid-row: auto; padding: 0; margin-bottom: 1.2em; }
	.regcard { position: static; }
}

@media (max-width: 900px) {
	.info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.info .wide { grid-column: span 2; }
	.stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.mem { grid-template-columns: 150px minmax(0, 1fr); }
	.bio { grid-column: 1 / -1; padding-left: 0; padding-top: 0; }
	.ngrid { grid-template-columns: minmax(0, 1fr); }
	.ncard { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 12px 24px; align-items: start; }
	.ncard .ntop { grid-column: 1 / -1; }
	.ncard .lprint { grid-row: 2 / 5; }
	.ncard .rw { grid-column: 2; }
	.evrow { grid-template-columns: 110px minmax(0, 1fr); }
	.evrow .efd { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
	.ngroup { grid-template-columns: minmax(0, 1fr); }
	.nnames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
	.pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
	.pcell .wp-block-image, .pg .pcell:not(:has(.wp-block-image img[src]))::before { height: 64px; }
	.pcell .wp-block-image img { max-height: 64px; }
	.pcell h3 { font-size: 16px; }
}

@media (max-width: 820px) {
	.sub, .node, .node:nth-child(even), .mapfig { grid-template-columns: minmax(0, 1fr); }
	.node:nth-child(even) .w { order: 0; text-align: left; }
	.big .i { padding-left: 6%; }
}

@media (max-width: 700px) {
	.cgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
	.hero--list .big { font-size: 13.5cqi; }
	.hero--list .big.big--long { font-size: 9.5cqi; }
	.hero--list .big.big--xlong { font-size: 7.5cqi; }
	.note-row, .note-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
	.print { max-width: 150px; }
	.note-row .fd, .note-row:nth-child(even) .fd { grid-column: 1; }
	.fieldbar { grid-template-columns: minmax(0, 1fr); }
	.fieldbar > div, .fieldbar > div + div { padding-left: var(--pad); }
	.fieldbar > div + div { border-top: 1px solid var(--line); }
	.s-head .bigprint { width: 200px; top: auto; bottom: 10px; opacity: .6; }
}

@media (max-width: 600px) {
	.ncard { display: flex; }
	.evrow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.evrow .efd, .evrow .cta { grid-column: 1; margin-top: 0; }
	.evrow .efd { grid-template-columns: minmax(0, 1fr); } /* When / Where / Organised by below each other */
	.evrow .cta { justify-self: stretch; }
	.evrow.past .more2 { justify-self: start; }
	.pit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.info { grid-template-columns: minmax(0, 1fr); }
	.info .wide, .info .half { grid-column: auto; }
	.mem { grid-template-columns: minmax(0, 1fr); }
	.ph { max-width: 200px; }
	#colophon .footer-html-inner { grid-template-columns: minmax(0, 1fr); }
	#colophon .afx-copy, #colophon .afx-footer-links { grid-column: 1; grid-row: auto; text-align: left; }
	#colophon .afx-footer-links ul { justify-content: flex-start; }
}

/* ==========================================================================
   Block editor: show the canvas placeholder instead of an empty box
   ========================================================================== */

.editor-styles-wrapper .topo { display: none; }
.editor-styles-wrapper .hero::before {
	content: "Contour animation appears on the live site";
	position: absolute;
	right: var(--pad);
	top: 12px;
	font: 500 10px/1 var(--f-mono);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
}

/* Ordinary pages */
.page-head { min-height: 0; }
.page-head h1 { max-width: 24ch; }

/* First paragraph of a research note: larger, with a big initial */
.rprose--note > p:first-child::first-letter { float: left; font: 300 4.4em/.8 var(--f-display); margin: .06em .1em 0 0; color: var(--contour); }

/* Reserve the image space before files load (no layout shift) */
.mapfig img { aspect-ratio: 1200 / 711; height: auto; }

/* Block editor: the editor wraps a group's blocks in extra containers;
   making them transparent lets the grids and flex rows (facts table, team
   rows, contact, network) lay out the real blocks, as on the site. Kadence's
   editor width limit is lifted inside our sections. These selectors only
   exist in the editor. */
.editor-styles-wrapper .wp-block-group__inner-container,
.wp-block-group > .block-editor-inner-blocks,
.wp-block-group > .block-editor-inner-blocks > .block-editor-block-list__layout { display: contents; }
.editor-styles-wrapper .wp-block-group .wp-block { max-width: none; margin-left: 0; margin-right: 0; }
.editor-styles-wrapper .wp-block-group__inner-container > .wp-block-group { margin-top: 0; margin-bottom: 0; }

/* Editor preview of an automatic home block that has nothing to show yet */
.afx-empty-note { margin: 0; padding: 24px; border: 1px dashed var(--line, #ccc); font: 14px/1.5 system-ui, sans-serif; color: #555; }

/* Editor: an empty Image block (Partner logo, Team member photo) shows its
   Upload / Media Library placeholder at full size instead of a clipped box. */
.editor-styles-wrapper .pcell .wp-block-image:has(.components-placeholder) { height: auto; display: block; }
.editor-styles-wrapper .ph .wp-block-image .components-placeholder { min-height: 180px; }

/* 404 */
.nf-body { max-width: 720px; padding-top: 8px; }
.nf-lead { margin: 0 0 22px; font-size: clamp(19.5px, 1.8cqi, 24px); line-height: 1.5; color: var(--ink); }
.nf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.nf-links .more2 { margin: 0; }

/* Video in a post before it is played (inc/embeds.php): the frame of the
   video with a play button; the player loads from YouTube / Vimeo on click */
.wp-block-embed__wrapper .afx-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--ph-bg); color: var(--ink); cursor: pointer; font: inherit; }
.wp-block-embed:not(.wp-has-aspect-ratio) .afx-play { position: relative; aspect-ratio: 16 / 9; }
.afx-play-i { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); position: relative; transition: background .2s; }
.afx-play-i::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--bg); }
.afx-play:hover .afx-play-i, .afx-play:focus-visible .afx-play-i { background: var(--contour); }
.afx-play-t { font: 500 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.afx-play small { font: 400 13px/1.3 var(--f-mono); color: var(--muted); }
.wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wp-block-embed:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper iframe { position: static; aspect-ratio: 16 / 9; height: auto; }

/* Event status (Cancelled / Postponed) */
.estatus { display: inline-block; margin-left: 10px; padding: 3px 8px 2px; border: 1px solid var(--contour); border-radius: 999px; color: var(--contour); font: 500 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.etags .estatus { margin-left: 0; }
.cta.tba.cta--status { border-style: solid; border-color: var(--contour); color: var(--contour); }

/* Long content (names, places, titles): shrink or wrap instead of overflowing */
.hero--list .big.big--long { font-size: clamp(32px, 7cqi, 120px); }
.hero--list .big.big--xlong { font-size: clamp(28px, 5cqi, 84px); }
.big.big--long span, .big.big--xlong span { white-space: normal; overflow-wrap: break-word; }
.lprint .lplace.lplace--long { font-size: clamp(24px, 2.7cqi, 40px); }
.lprint .lplace.lplace--xlong { font-size: clamp(18px, 1.9cqi, 28px); }
.cta.cta--long { white-space: normal; text-align: center; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; max-width: 100%; }
.fieldbar dd, .efd dd { overflow-wrap: break-word; hyphens: auto; }
.fieldbar dd.dd--long { font-size: clamp(12.5px, 1.1cqi, 16px); line-height: 1.3; }