/*
Theme Name: Play Matters
Theme URI: https://playmatters.ro/
Author: Play Matters
Author URI: https://playmatters.ro/
Description: Custom block theme for Play Matters — a bilingual (RO/EN) community site about meaningful play. Design tokens ported from the F2A design system and the locked F4D identity. All fonts and brand assets are local; the theme issues no external runtime request.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.3.26
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: play-matters
Tags: block-theme, full-site-editing, accessibility-ready, translation-ready

F7B.1b.2b.2b-DF2-correction-1 — the six vertical-slice page bodies are generated and
presented. Values are ported from the pinned F2 sources onto theme.json tokens; no
second design system is introduced.
*/

/*
 * Presentation layer for the Play Matters block theme.
 *
 * Colour, typography, spacing and layout primitives live in theme.json (the
 * canonical token source for the block editor). This stylesheet carries only
 * what theme.json cannot express: @font-face, focus-visible behaviour, the
 * reduced-motion contract and a small number of structural helpers.
 *
 * Ported deliberately from strategy/design/system/tokens.css (F2A) and the F5
 * brand layer. Values are not re-invented here.
 */

/* ---- Local fonts. No external request is ever issued. -------------------- */

/* Bricolage Grotesque — display. OFL 1.1 (assets/fonts/bricolage-grotesque/LICENSE)
   Variable wght 200–800. Romanian comma-below diacritics verified present. */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("assets/fonts/bricolage-grotesque/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("assets/fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 — text. OFL 1.1 (assets/fonts/source-sans-3/LICENSE)
   Variable wght 200–900, true italics. */
@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3/source-sans-3-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3/source-sans-3-latin-ext-wght-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Root scale ---------------------------------------------------------- */
/* F2A: 1rem = 17px. theme.json font sizes are expressed in rem against this. */
html {
	font-size: 106.25%;
}

/* ---- Focus (binding, F2A) ------------------------------------------------ */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* On inverse (ink) surfaces the ring flips to cream so it stays visible. */
.pm-on-inverse :focus-visible,
.pm-on-inverse:focus-visible {
	outline-color: var(--wp--preset--color--cream);
}

/* ---- Reduced motion (binding, F2A) -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Structural helpers -------------------------------------------------- */

/* Skip link — visible only on keyboard focus. */
.pm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.pm-skip-link:focus {
	left: 0;
}

/* ---- Brand lockup (G1/G2) ------------------------------------------------ *
 *
 * THE MARK IS PAINTED BY THE THEME, NOT FETCHED FROM AN OPTION. The F2→WordPress
 * audit measured `header.logo false` on EVERY captured page: `wp:site-logo`
 * renders nothing until a `custom_logo` attachment exists on the target, and
 * none does. The visible identity is therefore a background image on the
 * lockup GROUP — a file this theme ships — so it is present whether or not any
 * remote setting is ever made.
 *
 * `play-matters/brand-lockup` sits inside the group to carry the home link and
 * the accessible name. It is deliberately NOT the visible mark: the name is
 * visually hidden and stays in the accessibility tree, which is why the lockup
 * box keeps its own explicit size. The identity guide's 155×30 minimum is the
 * F2 header measurement (`logoRect` 155×30 at 1440×1000).
 *
 * THE NAME NO LONGER COMES FROM `blogname` (G1.4). `core/site-title` was
 * replaced by the plugin block precisely because an unbranded, generic or
 * emptied site title would have renamed or erased the identity in the
 * accessibility tree.
 * ------------------------------------------------------------------------- */
.pm-lockup {
	background-image: url("assets/brand/lockup-horizontal.svg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	flex: 0 0 auto;
	height: 30px;
	width: 155px;
}

/* The on-ink lockup for inverse surfaces (F2 `.footer-logo`, 196×38). */
.pm-lockup--inverse {
	background-image: url("assets/brand/lockup-horizontal-on-ink.svg");
	height: 38px;
	width: 196px;
}

/* The brand block emits an `<a>` (or, on the home page itself, a `<span>`)
   whose only child is the visually hidden name. It fills the lockup box so the
   whole mark is the target. */
.pm-brand {
	display: block;
	height: 100%;
	text-decoration: none;
	width: 100%;
}

/* Visually hidden, still announced. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	margin: 0;
	position: static;
	white-space: normal;
	width: auto;
}

/* Localized navigation — semantic layout only; the block ships no styling. */
.pm-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40, 1rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pm-nav__link[aria-current="page"] {
	font-weight: 600;
	text-decoration: none;
}

/* F2 `.lang-switch`: a bordered pill holding TWO segments, 44px tall, 13px
   labels. The pill's border and radius belong to the GROUP and the segments are
   square, exactly as F2 draws it — the previous one-target version put the
   radius on the single anchor because there was no second segment to hold. */
.pm-nav__langswitch {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	display: inline-flex;
	flex: 0 0 auto;
	min-height: 44px;
	overflow: hidden;
}

.pm-nav__lang {
	align-items: center;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--x-small);
	min-height: 44px;
	padding: 0 13px;
	text-decoration: none;
}

/* The current language is the filled half and is not a link. */
.pm-nav__lang--current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	cursor: default;
}

.pm-nav__lang--alt {
	color: var(--wp--preset--color--meta);
}

/* DEGRADED. The alternate did not resolve, so it is text: same label, no
   affordance. It must never read as a link that happens to be broken. */
.pm-nav__lang--unresolved {
	cursor: default;
	opacity: 0.55;
	text-decoration: none;
}

/* On the inverse footer surface the pill flips with the background. */
.pm-footer .pm-nav__langswitch {
	border-color: var(--wp--preset--color--sky);
}

.pm-footer .pm-nav__lang--current {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

/* ---- G1.1: the support call to action ------------------------------------ */

/* F2 `.btn.small.cta-head` in the bar, `.btn` in the sheet. */
.pm-nav__cta {
	background: var(--wp--preset--color--cta);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--white);
	display: inline-block;
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 9px 16px;
	text-decoration: none;
}

.pm-nav__cta:hover {
	background: var(--wp--preset--color--cta-hover);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* ---- G1.3: the mobile disclosure ----------------------------------------- *
 *
 * PROGRESSIVE ENHANCEMENT. The trigger is hidden by default and the desktop
 * menu is never hidden by an ungated rule, so a document without the `pm-js`
 * marker keeps a fully visible, usable navigation and shows no dead control.
 * Only the enhanced state below swaps the two.
 * ------------------------------------------------------------------------- */
.pm-nav__disclosure {
	align-items: center;
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--ink);
	display: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	justify-content: center;
	line-height: 1;
	margin-inline-start: auto;
	min-height: 44px;
	padding: 0 16px;
}

.pm-nav__sheet {
	display: none;
}

.pm-nav__sheet[data-open="true"] {
	background: var(--wp--preset--color--cream);
	display: block;
	inset: 0;
	overflow: auto;
	padding: var(--wp--preset--spacing--50, 1.4rem) var(--wp--custom--container-pad, 20px) var(--wp--preset--spacing--70, 2.8rem);
	position: fixed;
	z-index: 30;
}

.pm-nav__sheet-bar {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--wp--preset--spacing--50, 1.4rem);
}

.pm-nav__sheet-close {
	align-items: center;
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	justify-content: center;
	line-height: 1;
	min-height: 44px;
	padding: 0 16px;
}

.pm-nav__sheet-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pm-nav__sheet-item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pm-nav__sheet-item .pm-nav__link {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: var(--wp--preset--font-size--large);
	padding: 14px 4px;
	text-decoration: none;
}

.pm-nav__sheet-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40, 1rem);
	margin-top: var(--wp--preset--spacing--50, 1.4rem);
}

/* Measure for long-form reading (F2A: 66ch). */
.pm-measure {
	max-width: 66ch;
}

/* Scaffold marker — F7B.1a placeholders only. Removed in F7B.1b when real
   content is bound. Visible in the editor, inert on the front end. */
.pm-scaffold-note {
	border: 1px dashed var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------------- *
 * THE SHELL — F2 parity remediation, theme half.
 *
 * Answers the gaps the 2026-08-01 F2→WordPress audit measured: G1 (branded
 * header), G2 (ample footer), the THEME-ONLY half of G3 (wide/full-bleed
 * infrastructure), G5 (contextual typography), G6 (doors cards) and G9
 * (breadcrumb bar).
 *
 * PORTED, NOT INVENTED. Every number comes from the pinned F2 sources
 * (`strategy/design/f2-site/assets/site.css`, `strategy/design/system/tokens.css`)
 * or from the audit's own measurements, mapped onto a theme.json token wherever
 * one exists.
 *
 * WHAT THIS LAYER DELIBERATELY DOES NOT DO. The full-bleed section BANDS
 * themselves are body markup (`alignfull` groups with backgrounds) and belong to
 * the body-builder tranche. This layer only builds the infrastructure they need:
 * a container that reaches F2's width, a gutter the theme draws itself, and
 * template wrappers that no longer trap an `alignfull` child in the reading
 * column.
 * ------------------------------------------------------------------------- */

/* ---- G3 (theme half): container, gutter, full-bleed escape ---------------- */

/*
 * The gutter is the THEME's, not the root's — and it sits on the CONTAINER.
 *
 * theme.json sets root padding to 0, so `.wp-site-blocks` — and therefore the
 * header, the footer and every `alignfull` band — reaches the viewport edge.
 * The reading gutter is then drawn here, exactly the way F2's `.wrap` draws it
 * (`padding: 0 20px` inside a 1080px container).
 *
 * WHY THE CONTAINER AND NOT EACH CHILD. The first version padded every non-full
 * child, and the local capture caught what that costs: an element that already
 * carries the reading measure (`max-width: 66ch`) then loses 2×20px of TEXT, so
 * the lead paragraph measured 583.23px against F2's 623.23px. Padding the
 * container leaves the measure intact.
 *
 * A direct full-bleed child escapes the gutter with the exact negative margin
 * and regains the width, which is the same shape as core's own root-padding-
 * aware alignment rule. `post-content` is itself that direct full-bleed child;
 * descendants do not draw or escape a second page gutter. Full-bleed bands
 * re-establish their safe wide content box through `.pm-band-inner`.
 */
.pm-main {
	box-sizing: border-box;
	padding-inline: var(--wp--custom--container-pad, 20px);
}

.pm-main > .alignfull {
	margin-inline: calc(var(--wp--custom--container-pad, 20px) * -1);
	width: calc(100% + var(--wp--custom--container-pad, 20px) * 2);
}

/*
 * Below F2's 900px breakpoint the desktop navigation moves into the disclosure
 * sheet — but ONLY in the enhanced state.
 *
 * Every hiding rule here is gated on `.pm-js`, the marker `nav-disclosure.js`
 * adds. Without scripting nothing below applies: the bar keeps its links and
 * wraps, which is a taller header but a navigable one. The reference prototype
 * hides its menu unconditionally and is unnavigable without JavaScript; that is
 * deliberately not ported.
 *
 * The sheet-scoped list keeps its own class, so the rule that hides the bar's
 * list can never reach the links inside the open sheet.
 *
 * EVERY SUBJECT BELOW IS `.pm-nav--disclosure`, THE INSTANCE THAT HAS A SHEET.
 * The earlier subject was `.pm-nav--primary`, which is a LABEL SET rather than a
 * behaviour: the footer reuses the primary labels without a disclosure, so the
 * same rule hid its whole primary column at 390px and those five links were
 * recoverable from nothing. A surface may only be hidden by the control that can
 * bring it back.
 */
@media (max-width: 899px) {
	/* Keep the complete header stacking context above the following main content
	   without making the compact mobile header sticky. The fixed disclosure sheet
	   remains viewport-sized inside this elevated context. */
	.pm-site-header {
		position: relative;
		z-index: 20;
	}

	.pm-js .pm-nav--disclosure .pm-nav__list,
	.pm-js .pm-nav--disclosure .pm-nav__langswitch,
	.pm-js .pm-nav--disclosure .pm-nav__cta {
		display: none;
	}

	.pm-js .pm-nav--disclosure .pm-nav__disclosure {
		display: inline-flex;
	}

	.pm-header__bar {
		gap: var(--wp--preset--spacing--40, 1rem);
	}

	/* The dialog receives the same local lockup as the page header without a
	   second semantic home link or a Core renderer change. */
	.pm-nav__sheet-bar {
		background-image: url("assets/brand/lockup-horizontal.svg");
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 155px 30px;
		min-height: 44px;
	}

	.pm-nav__sheet-item .pm-nav__link {
		font-size: 17px;
	}
}

/*
 * Constructs that belong in F2's wide container rather than the reading column.
 * This is the same escape `.alignwide` gets; it is applied by class because the
 * markup that would carry `alignwide` is stored body content, which this tranche
 * does not touch.
 *
 * The value is the container's INNER width. Its parent already draws the 20px
 * gutter, so a child's max-width is a CONTENT width: the raw 1080px token made
 * the grid 1080px against F2's 1040px, which the local capture measured as
 * 344px cards against F2's 333.33px.
 */
.is-layout-constrained > .pm-breadcrumbs,
.is-layout-constrained > .pm-doors-cards,
.is-layout-constrained > .pm-why-columns,
.is-layout-constrained > .wp-block-play-matters-managed-listing {
	max-width: calc(var(--wp--style--global--wide-size) - var(--wp--custom--container-pad, 20px) * 2);
	width: 100%;
}

.pm-main {
	padding-block: var(--wp--preset--spacing--70, 2.8rem) var(--wp--preset--spacing--80, 3.7rem);
}

/* The front page begins with the halftone hero. WordPress otherwise inserts the
   main shell's top padding and a first-child block gap before that painted
   surface, leaving a blank cream seam below the navigation. Interior templates
   keep the shared `.pm-main` rhythm unchanged. */
.pm-main--front-page {
	padding-top: 0;
}

/* WordPress projects the root flow gap onto the main wrapper itself. Target the
   direct homepage child so interior templates keep the shared root rhythm. */
.wp-site-blocks > .pm-main--front-page {
	margin-block-start: 0;
}

.pm-main--front-page > .wp-block-post-content {
	margin-block-start: 0;
}

/* ---- G1: the branded header ---------------------------------------------- */

/* F2 `header.site`: sticky, cream at 94%, blurred, hairline underneath. The
   translucent value is F2's exact one — the cream token cannot express it. */
.pm-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: relative;
	z-index: 0;
}

/*
 * THE BLUR AND THE TRANSLUCENT FILL LIVE ON A PSEUDO-ELEMENT, NOT ON THE HEADER.
 *
 * `backdrop-filter` on an element makes that element the containing block for
 * every `position: fixed` DESCENDANT (CSS Filter Effects 2 §containing block,
 * the same rule `filter` and `transform` obey). The disclosure sheet is such a
 * descendant — the navigation block renders it inside the header — so `inset: 0`
 * resolved against the 73px header instead of the viewport, and the capture
 * measured the open sheet at 390×72 with the page still visible behind it.
 *
 * A pseudo-element has no element descendants, so it can carry the effect
 * without capturing anything. The paint is identical: the same blur over the
 * same translucent cream, across the same box. `z-index: -1` keeps it behind the
 * bar's own content inside the header's stacking context, and `pointer-events`
 * are dropped so it can never intercept a click meant for the bar.
 */
.pm-header::before {
	backdrop-filter: blur(6px);
	background: rgba(250, 246, 238, 0.97);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Owner decision 2026-08-05: the translucent bar follows scroll on desktop
   only. Sticky positioning belongs to the real WordPress template-part wrapper;
   mobile keeps its compact header in normal document flow. */
@media (min-width: 900px) {
	.pm-site-header {
		position: sticky;
		top: 0;
		z-index: 20;
	}
}

/* F2 `.bar` inside `.wrap`: 14px block padding, the container's 20px gutter. */
.pm-header__bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50, 1.4rem);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-block: 14px;
	padding-inline: var(--wp--custom--container-pad, 20px);
}

/* F2 `nav.main`: pushed to the right, 15px meta-coloured links.
 *
 * The nav now holds three things — the list, the language pill and the CTA —
 * and the last two are inline-level, so a block `<nav>` laid them on a SECOND
 * line. The local capture measured that as a 102.19px desktop header against
 * F2's 75px. One flex row is what the reference bar is.
 *
 * EVERY RULE IN THIS GROUP IS SCOPED TO `.pm-header__bar`. `.pm-nav--primary` is
 * a LABEL SET, not a place: the footer reuses it, and these declarations beat
 * `.pm-footer a` on specificity, so the footer's five primary links were being
 * painted the header's meta grey ON THE INK BAND and centred by the header's
 * `align-items`. That was invisible only because the same label set was also
 * being hidden at 390px; the 1440px capture had been carrying it all along. A
 * surface's presentation belongs to the surface. */
.pm-header__bar .pm-nav--primary {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50, 1.4rem);
	margin-inline-start: auto;
}

.pm-header__bar .pm-nav--primary .pm-nav__list {
	align-items: center;
	gap: var(--wp--preset--spacing--50, 1.4rem);
}

.pm-header__bar .pm-nav--primary .pm-nav__link {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.pm-header__bar .pm-nav--primary .pm-nav__link:hover {
	color: var(--wp--preset--color--cta-hover);
}

/* F2 marks the current page with a coral keyline, not with colour alone. */
.pm-header__bar .pm-nav--primary .pm-nav__link[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--coral);
	color: var(--wp--preset--color--ink);
}

/* ---- G2: the ample inverse footer ---------------------------------------- */

/* F2 `footer.site`: the ink band, generous vertical rhythm. */
.pm-footer {
	color: #E9E4D8;
	font-size: 15px;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--80, 3.7rem) var(--wp--preset--spacing--70, 2.8rem);
	position: relative;
}

/* F2's coral footer voice: decoration only, kept out of the accessibility tree
   by using a pseudo-element rather than stored block markup. */
.pm-footer::before {
	background: var(--wp--preset--color--coral);
	border-radius: var(--wp--custom--radius--blob-1);
	content: "";
	height: 140px;
	opacity: 0.55;
	pointer-events: none;
	position: absolute;
	right: 6%;
	top: -60px;
	width: 170px;
}

.pm-footer__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--custom--container-pad, 20px);
	position: relative;
	z-index: 1;
}

/* F2 `footer.site .cols`: 1.4fr 1fr 1fr, stacking at 840px. */
.pm-footer__cols {
	display: grid;
	gap: var(--wp--preset--spacing--60, 1.9rem);
	grid-template-columns: 1fr;
}

@media (min-width: 840px) {
	.pm-footer__cols {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

/* On ink the link colour flips: the warm action red is unreadable there. */
.pm-footer a {
	color: #BDB7A8;
	font-size: 15px;
	text-decoration: none;
}

.pm-footer a:hover {
	color: var(--wp--preset--color--cream);
	text-decoration: underline;
}

/* F2 stacks the footer navigation vertically, one link per line. */
.pm-footer .pm-nav__list {
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 0.5rem);
}

.pm-footer .pm-nav__langswitch {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

/*
 * The support call to action.
 *
 * The plugin's footer navigation resolves Susține / Support as its FIRST item,
 * per language, through the managed source ID — so the CTA is presentation over
 * a link the plugin already places correctly, never a route this theme names.
 * The position is the plugin's declared order, which is why the selector is
 * positional and this comment exists.
 */
.pm-footer__cta .pm-nav__item:first-child .pm-nav__link {
	background: rgba(166, 198, 210, 0.18);
	border: 1px solid rgba(233, 228, 216, 0.32);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--cream);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.55em 1em;
}

.pm-footer__cta .pm-nav__item:first-child .pm-nav__link:hover {
	background: rgba(166, 198, 210, 0.28);
	text-decoration: none;
}

.pm-footer .pm-nav__lang {
	color: #BDB7A8;
	font-size: 13px;
	min-height: 36px;
	padding-inline: 11px;
}

/* This declaration must follow the generic footer language rule. Otherwise
   the cream selected segment inherits cream text and becomes white-on-white. */
.pm-footer .pm-nav__lang.pm-nav__lang--current {
	color: var(--wp--preset--color--ink);
}

/* ---- G2: the official social destinations and the register ---------------- */

/* F2 renders the two accounts on one line, separated by an interpunct, with the
   shared handle after them. The plugin emits the links and the marks; every
   value below is the theme's. */
.pm-social {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
}

.pm-social__link {
	text-decoration: none;
}

.pm-social__link:hover {
	text-decoration: underline;
}

/* The outward mark is decoration: the accessible note beside it carries the
   meaning, so this must not be announced and must not be a focus target. */
.pm-social__mark {
	font-size: 0.85em;
	margin-inline-start: 0.15em;
}

.pm-social__sep {
	color: #BDB7A8;
}

.pm-social__handle {
	color: #E9E4D8;
	margin-inline-start: 0.4em;
}

/* F2 `footer.site .legal`: the register line sits with the other institutional
   facts, at the same muted scale. */
.pm-footer-meta__registry {
	color: #BDB7A8;
	font-size: var(--wp--preset--font-size--x-small);
	margin: var(--wp--preset--spacing--30, 0.5rem) 0 0;
}

/* F2 `footer.site .legal`: a ruled block of institutional facts. */
.pm-footer__legal {
	border-top: 1px solid rgba(233, 228, 216, 0.2);
	color: #BDB7A8;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
	margin-top: var(--wp--preset--spacing--60, 1.9rem);
	padding-top: var(--wp--preset--spacing--50, 1.4rem);
}

.pm-footer__legal-line {
	margin: 0;
}

/* ---- G5: contextual typography ------------------------------------------- */

/*
 * The audit measured ONE headline scale everywhere: subpage H1s rendered at the
 * home hero's 60px/700 instead of F2's 40px/800. theme.json now makes the
 * SUBPAGE scale the default; the hero asks for the larger one by name, and only
 * `front-page.html` does.
 */
.pm-page-title {
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--display, 1.06);
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	max-width: 24ch;
}

.pm-hero-title {
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--display, 1.06);
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	max-width: 20ch;
}

/* F2 `.meta-line` under an editorial title. */
.pm-page-meta {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--50, 1.4rem);
}

/* ---- Policy surfaces: F2 `.spec-banner`, `.plain-summary`, `.skeleton` --- */

/* The exact F2 wrapper owns the notice; the paragraph inside remains editorial. */
.page-template-page-policy .pm-policy-spec-banner {
	background: var(--wp--preset--color--card);
	border: 2px dashed var(--wp--preset--color--ochre);
	border-radius: var(--wp--custom--radius--card, 14px);
	margin: 0 0 var(--wp--preset--spacing--70, 2.8rem);
	max-width: var(--wp--custom--measure, 66ch);
	padding: var(--wp--preset--spacing--40, 0.941rem) var(--wp--preset--spacing--50, 1.412rem);
}

.page-template-page-policy .pm-policy-spec-banner .pm-inline-run {
	margin: 0;
}

.pm-kicker {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--caps, 0.08em);
	margin: 0 0 var(--wp--preset--spacing--40, 0.941rem);
	text-transform: uppercase;
}

/* The source-owned summary wrapper keeps its label and paragraph together. */
.page-template-page-policy .pm-policy-summary {
	background: var(--wp--preset--color--tint);
	border-radius: var(--wp--custom--radius--card, 14px);
	margin: 0 0 var(--wp--preset--spacing--70, 2.8rem);
	max-width: var(--wp--custom--measure, 66ch);
	padding: var(--wp--preset--spacing--50, 1.412rem) var(--wp--preset--spacing--60, 1.882rem);
}

.page-template-page-policy .pm-policy-summary .pm-kicker {
	margin: 0 0 var(--wp--preset--spacing--30, 0.471rem);
}

.page-template-page-policy .pm-policy-summary > p:last-child {
	margin: 0;
}

.pm-policy-skeleton {
	counter-reset: pm-policy-step;
	list-style: none;
	margin: 0;
	max-width: var(--wp--custom--measure, 66ch);
	padding: 0;
}

.pm-policy-skeleton > li {
	border: 1px dashed #CFC7B4;
	border-radius: var(--wp--custom--radius--chip, 6px);
	color: var(--wp--preset--color--meta);
	counter-increment: pm-policy-step;
	margin-bottom: var(--wp--preset--spacing--40, 0.941rem);
	padding: var(--wp--preset--spacing--40, 0.941rem) var(--wp--preset--spacing--50, 1.412rem);
}

.pm-policy-skeleton > li::before {
	color: var(--wp--preset--color--ink);
	content: counter(pm-policy-step) " \00B7  ";
	font-family: var(--wp--preset--font-family--display);
}

.pm-policy-skeleton strong {
	color: var(--wp--preset--color--ink);
}

/* VQA-H6/H7: preserve the row owners carried by the corpus builder. */
.pm-diagram--strength {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 14px);
	box-sizing: border-box;
	margin-block: var(--wp--preset--spacing--60, 1.882rem);
	max-width: var(--wp--custom--measure, 66ch);
	padding: var(--wp--preset--spacing--50, 1.412rem);
}

.pm-diagram--strength .pm-diagram-heading,
.pm-diagram--strength .pm-figure-caption,
.pm-evidence-row > p,
.pm-costed > p {
	margin: 0;
}

.pm-evidence-bars {
	display: grid;
	gap: var(--wp--preset--spacing--30, 0.5rem);
}

.pm-evidence-row {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--30, 0.5rem);
	grid-template-columns: minmax(0, 1fr) auto;
	padding-block: var(--wp--preset--spacing--30, 0.5rem);
}

.pm-evidence-verdict,
.pm-label {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--caps, 0.08em);
	text-transform: uppercase;
}

.pm-evidence-verdict {
	white-space: nowrap;
}

.pm-costed {
	border-left: 3px solid var(--wp--preset--color--ochre);
	display: grid;
	gap: var(--wp--preset--spacing--40, 1rem);
	grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
	margin-block: var(--wp--preset--spacing--40, 1rem);
	padding: var(--wp--preset--spacing--30, 0.5rem) 0 var(--wp--preset--spacing--30, 0.5rem) var(--wp--preset--spacing--40, 1rem);
}

.pm-cookie-register {
	box-sizing: border-box;
	margin-inline: 0;
	max-width: var(--wp--custom--measure, 66ch);
	overflow-x: auto;
	width: 100%;
}

.pm-cookie-register table {
	border-collapse: collapse;
	min-width: 36rem;
	width: 100%;
}

.pm-cookie-register th,
.pm-cookie-register td {
	border: 1px dashed var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--meta);
	overflow-wrap: anywhere;
	padding: var(--wp--preset--spacing--30, 0.5rem) var(--wp--preset--spacing--40, 1rem);
	text-align: left;
}

.pm-cookie-register th {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

@media (max-width: 640px) {
	.pm-evidence-row,
	.pm-costed {
		grid-template-columns: 1fr;
	}

	.pm-evidence-verdict {
		white-space: normal;
	}
}

.pm-meta-line {
	color: var(--wp--preset--color--meta);
	font-size: 0.853rem;
}

/* ------------------------------------------------------------------------- *
 * Managed listings — F7B.1b.2b.2b-DF1.
 *
 * The plugin emits SEMANTICS AND CLASS HOOKS ONLY (ARCHITECTURE.md §3.2 rule 6);
 * every visual decision below is the theme's. Values come from theme.json
 * tokens, not from new invented numbers.
 *
 * The plugin also emits NO connective text: no interpunct between the metadata
 * parts, and no "min read" / "min de citit" unit word. Both are editorial
 * labels, and hardcoding a per-language pair in PHP is forbidden — so the
 * separator is drawn here and the unit word stays a documented gap until body
 * generation or the theme catalogue supplies it.
 * ------------------------------------------------------------------------- */

.pm-listing__items,
.pm-listing__rows {
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
}

/* The editorial grid's own column shape and breakpoint are F2's and live in the
   "F2 editorial card layout" section below, projected from `.grid3`. They used
   to be an invented `@media (min-width: 700px)` with `repeat(3, minmax(0, 1fr))`
   — a different breakpoint in the opposite direction from F2's `max-width:900px`
   collapse, which is how a 680px content column ended up drawing three ~210px
   cards with broken titles (G6/G8 in the parity audit). */

/* Only the SHELF row keeps the invented plugin-era surface (correction-1).
   `.pm-listing__card` and `.pm-listing__featured` used to be in this list, which
   painted a card background, a 1px hairline and a 10px radius onto BOTH the
   editorial card — whose real surface is F2's `.card`, with a different border
   colour and a 14px radius — and the hub feature, which F2 leaves completely
   bare. Every per-selector assertion passed while it did, because none of them
   asked what the browser would actually use. */
.pm-listing__row {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	overflow: hidden;
}

/* No generic `.pm-listing__body { padding }` (correction-1): that rule reached
   the HUB FEATURE's text column, which F2 gives no padding at all — the photo
   and the text are separated by the grid gap, not by an inset. The card body
   carries its own F2 padding in the editorial-card section below, and the shelf
   row already resets its own to 0. */

.pm-listing__media {
	margin: 0;
}

.pm-listing__image {
	display: block;
	width: 100%;
	height: auto;
	/* F2 `.ph-img`: the tinted plate behind a photograph that has not painted
	   yet, and the base media radius each context then overrides. */
	background: var(--wp--preset--color--tint);
	border-radius: var(--wp--custom--radius--media, 18px);
}

/* No `.pm-listing__credit` rule: the renderer emits no credit element on any
   listing surface (PM_Managed_Listing_Renderer rule 10 — F2's listings carry no
   photo credit). The attachment metadata is untouched; only the floating
   "Foto:" / "Photo:" line is gone, so a rule for it would be dead CSS. */
.pm-listing__category,
.pm-listing__meta {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
}

.pm-listing__title {
	margin: var(--wp--preset--spacing--20, 0.25rem) 0;
}

/* The metadata separator is DRAWN, never emitted as text: no editorial
   punctuation crosses the plugin boundary, and a decorative glyph must not reach
   a screen reader as content.

   correction-1: `speak: never` was the wrong instrument — it is barely
   implemented, and CSS generated content IS announced by several screen readers.
   The two-value `content` syntax is the standards-correct mechanism: the string
   after the slash is the ALTERNATIVE TEXT, and an empty one means "announce
   nothing". Browsers that do not support the alt-text form ignore the whole
   declaration and simply draw no separator, which degrades to correct. */
.pm-listing__meta > * + *::before {
	content: "\00B7" / "";
	margin: 0 0.4em;
}

/* The hub feature's two-column shape is F2's `.hub-featured` and lives in the
   "F2 editorial card layout" section below. The invented `1fr 1fr` at
   `min-width: 700px` was neither F2's ratio (1.1fr 0.9fr) nor F2's breakpoint
   (`max-width:840px`), and F2 centres the two columns rather than top-aligning
   them. */

/* Reference shelf: a row is a compact horizontal record, not a card grid. */
.pm-listing__row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 1rem);
	overflow: visible;
	padding: var(--wp--preset--spacing--40, 1rem);
}

.pm-listing__row .pm-listing__body {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 0;
}

.pm-listing__badge {
	background: var(--wp--preset--color--tint);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.2em 0.7em;
}

/* Category chips are NON-INTERACTIVE by contract: the plugin emits spans, and
   nothing here may give them a pointer affordance or a focus ring. */
.pm-listing__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 0.5rem);
}

.pm-listing__chip {
	background: var(--wp--preset--color--tint);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.25em 0.8em;
}

.pm-listing__chip-label {
	font-weight: 600;
}


/* The contracted F2 hooks (COMPOSITION_CONTRACT.md §12.2). The renderer emits
   these FIRST and the pm-listing__* names second, so both selectors are live;
   these rules attach to the contracted names so the theme does not depend on
   the additive ones. */
/* Only the SHELF row keeps this invented surface (correction-1). `.card.art-card`
   and `.hub-featured` used to share it: the card's real surface is F2's `.card`
   (a #EAE3D3 hairline, a 14px radius, a whisper shadow, a transition), and the
   hub feature has NO surface in F2 at all. Both are now owned, completely, by the
   editorial-card section below. */
.event-row {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	overflow: hidden;
}

/* No generic `.card-body`, `.card-cat`, `.feat-cat`, `.card-meta`, `.feat-meta`
   or `.feat-title` rules (correction-1): each of them shipped a PARTIAL version
   of an F2 rule — the two metadata lines were given F2's x-small instead of its
   small, and the two category lines lost their uppercase, tracking and margin
   entirely. A partial rule is worse than none: it looks like the design and is
   not. The complete F2 union owns all six below. `.meta-line` is the shelf row's
   dek and keeps its own rule. */
.meta-line {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
}

.cat-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 0.5rem);
	margin: 0 0 var(--wp--preset--spacing--60, 2rem);
}

.cat-chip {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--chip, 6px);
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--small);
	padding: 5px 12px;
}

.cat-chip b {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.pm-listing__featured-marker::after {
	background: currentColor;
	border-radius: 50%;
	content: "";
	display: inline-block;
	aspect-ratio: 1;
	margin: 0 0.65em 0.18em;
	width: 3px;
}

.badge.kind {
	background: var(--wp--preset--color--tint);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.2em 0.7em;
}

/* F2 `.badge` — the corpus uses explicit `pm-` hooks so these labels retain
   their compact chip treatment outside listing-renderer markup. */
.pm-badge {
	background: rgba(159, 184, 216, 0.25);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	padding: 3px 9px;
	text-transform: lowercase;
}

.pm-badge--prep {
	background: rgba(217, 164, 65, 0.22);
}

.pm-badge--kind {
	background: rgba(226, 114, 91, 0.16);
}

/* Gutenberg's tint utility supplies the same colour; this explicit selector
   keeps the custom community hook intentionally theme-owned. */
.pm-community {
	background: var(--wp--preset--color--tint);
}

/* RC F-04 — the F2 related/read-next module, projected without structural
   substitution. The plugin emits every F2 hook below plus an additive
   pm-listing hook; all presentation remains theme-owned. */
.pm-listing--related-articles {
	margin: 48px 0 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 24px;
}

.pm-listing--related-articles .pm-listing__framing {
	margin: 0 0 16px;
}

.pm-listing--related-articles .pm-listing__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.pm-listing--related-articles .rel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width:640px) {
	.pm-listing--related-articles .rel-grid {
		grid-template-columns: 1fr;
	}
}

.pm-listing--related-articles .rel-card {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-radius: var(--wp--custom--radius--card, 14px);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--whisper);
	transition: box-shadow var(--wp--custom--motion--duration-base, 200ms) var(--wp--custom--motion--easing, ease);
}

.pm-listing--related-articles .rel-card:hover {
	box-shadow: var(--wp--preset--shadow--card);
}

.pm-listing--related-articles .rel-card .ph-fig {
	margin: 0;
}

.pm-listing--related-articles .rel-card .ph-img {
	border-radius: 0;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.pm-listing--related-articles .rel-cat {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	color: var(--wp--preset--color--meta);
	margin: 12px 16px 0;
}

.pm-listing--related-articles .rel-title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--font-weight--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--heading);
	margin: 4px 16px 16px;
}

.pm-listing--related-articles .rel-card:hover .rel-title {
	color: var(--wp--preset--color--cta-hover);
}

.pm-listing--related-articles .rel-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------- *
 * G8 — the F2 editorial card layout.
 *
 * Every length, ratio and breakpoint below is F2's own, projected from
 * `strategy/design/f2-site/assets/site.css` (`.grid3`, `.art-card`,
 * `.hub-featured` and their `.ph-fig` / `.ph-img` children) and asserted against
 * that stylesheet at run time by `tests/test-f2-residuals-g4-g8.js`. Nothing
 * here is a re-typed number: if F2 moves, the pin fails before the comparison.
 *
 * `--grid-gap` (20px) and `--grid-gap-lg` (40px) have no theme.json spacing
 * step, so they are projected as F2's own literal lengths rather than snapped to
 * a step that is not the design. Every other value resolves to a custom property
 * `theme.json` really publishes.
 *
 * `.pm-listing__items` IS `.grid3`: the renderer emits that container for the
 * home module and the article grid and for nothing else — the shelf is
 * `.pm-listing__rows`, the chips are `.pm-listing__chips`, and the feature has
 * no collection at all.
 * ------------------------------------------------------------------------- */

.pm-listing__items {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
}

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

/* --- the card, as F2's `.card` UNION `.art-card` -------------------------- *
 *
 * correction-1 ports the WHOLE union, not the four declarations `.art-card`
 * happens to add. An editorial card in F2 is a `.card` first — its background,
 * its #EAE3D3 hairline, its 14px radius, its whisper shadow, its positioning
 * context and its shadow transition all come from there — and `.art-card` then
 * turns it into a flex column and takes its padding away. Porting only the
 * second half left the card with a plugin-era surface that merely resembled it.
 * ------------------------------------------------------------------------- */
.card.art-card {
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-radius: var(--wp--custom--radius--card, 14px);
	box-shadow: var(--wp--preset--shadow--whisper);
	position: relative;
	transition: box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--easing);
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	/* NOT F2, and deliberately so. A grid item's default `min-width: auto` cannot
	   shrink below its content, so one long unbreakable title widens its track and
	   the card clips it against the `overflow: hidden` above — the "titluri sparte"
	   the parity audit measured. F2 never hits this because its grid sits in a
	   1040px wrap; the WordPress listing has to survive a narrower one. */
	min-width: 0;
}

.card.art-card:hover {
	box-shadow: var(--wp--preset--shadow--card);
}

.card.art-card .card-body {
	padding: var(--wp--preset--spacing--40, 0.941rem) 24px 24px;
}

.card.art-card .card-cat {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	color: var(--wp--preset--color--meta);
	margin: 0 0 8px;
}

.card.art-card h3 {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--heading);
}

/* The homepage cards get an explicit local pin so later WordPress global
   heading rules cannot inflate their title scale above the F2 card token. */
.pm-home-editorial .card.art-card h3 {
	font-size: 1.294rem;
}

.pm-home-editorial .pm-listing__items + .pm-listing__framing {
	margin-top: var(--wp--preset--spacing--60, 1.9rem);
}

.card.art-card h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.card.art-card h3 a:hover {
	color: var(--wp--preset--color--cta-hover);
}

/* F2 `.card p`: the card's own body copy, one step below the reading size. */
.card.art-card p {
	color: var(--wp--preset--color--meta);
	font-size: 15.5px;
	margin: 0 0 12px;
}

/* `margin: auto 0 0` is what pushes the metadata line to the bottom of a flex
   column, so cards of unequal text length still align their meta rows. */
.card.art-card .card-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--meta);
	margin: auto 0 0;
	padding-top: 12px;
}

.card.art-card .pm-listing__media {
	margin: 0;
}

.card.art-card .pm-listing__image {
	border-radius: 0;
	aspect-ratio: 16/10;
	object-fit: cover;
}

/* --- the hub feature ------------------------------------------------------ *
 *
 * F2's `.hub-featured` is a two-column grid and NOTHING else: no background, no
 * border, no radius, no clipping and no padding on its text column. It is a
 * layout, not a card, and every surface property that reached it was a leak.
 * ------------------------------------------------------------------------- */
.hub-featured {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
	margin: 0 0 48px;
}

@media (max-width:840px) {
	.hub-featured {
		grid-template-columns: 1fr;
	}
}

.hub-featured .pm-listing__media {
	margin: 0;
}

.hub-featured .pm-listing__image {
	aspect-ratio: 3/2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card, 14px);
}

.hub-featured .feat-cat {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	color: var(--wp--preset--color--meta);
	margin: 0 0 8px;
}

/* F2's `--fs-2xl` is `clamp(1.647rem, 1.2rem + 2vw, 2.353rem)`. theme.json's
   `heading-m` is a DIFFERENT clamp (1.3rem + 1.6vw), so mapping onto it would
   ship a type scale the design does not have; the F2 literal is the projection. */
.hub-featured .feat-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.647rem,1.2rem + 2vw,2.353rem);
	line-height: var(--wp--custom--line-height--display);
	margin: 0 0 12px;
}

.hub-featured .feat-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.hub-featured .feat-title a:hover {
	color: var(--wp--preset--color--cta-hover);
}

.hub-featured .feat-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--meta);
	margin: 12px 0 0;
}

/* A title WRAPS rather than being truncated. There is no `text-overflow`, no
   line clamp and no fixed height anywhere in this section: a card that hides
   part of its own headline is a defect, not a layout. */
.pm-listing__title {
	overflow-wrap: break-word;
}

/* The shelf cover is a span, so it needs an explicit box. When no managed image
   resolves it stays empty and aria-hidden — the theme may decorate it, but the
   plugin never invents content for it. */
.cover {
	display: block;
	flex: 0 0 auto;
	inline-size: 96px;
}

.cover img {
	block-size: auto;
	border-radius: 6px;
	display: block;
	inline-size: 100%;
}

/* ------------------------------------------------------------------------- *
 * Page-body presentation — F7B.1b.2b.2b-DF2-correction-1.
 *
 * DF2 generated the six canonical bodies; they emitted derived `pm-` class
 * hooks and no styling at all, which left every one of them unpresented. This
 * section is the smallest presentation layer that restores F2's visible
 * hierarchy for exactly those hooks.
 *
 * PORTED, NOT INVENTED. Every value below comes from
 * `strategy/design/f2-site/assets/site.css` (the pinned F2 source) mapped onto a
 * theme.json token. Where F2 used a raw value that theme.json already expresses
 * as a token, the token wins; where it used one theme.json does not carry, the
 * F2 relationship is carried across rather than re-invented.
 *
 * PARITY. `functions.php` loads this same file into the block editor via
 * `add_editor_style( 'style.css' )`, so an author sees what a reader sees.
 *
 * DEGRADED ELEMENTS STAY DEGRADED. `--static` variants and the inert
 * support-card control get NO pointer cursor, NO hover transform and NO focus
 * affordance. Something that is not a link must not look or behave like one.
 *
 * NOT VERIFIED IN A BROWSER. No browser has rendered any of this.
 * ------------------------------------------------------------------------- */

/* ---- Editorial paragraph roles ------------------------------------------ */

/* The home hero is one native block grid: authored copy on the left, the
   theme-owned collage on the right. The halftone is the F2 grain projected at
   its effective opacity (0.16 dot colour × 0.5 layer opacity). */
.pm-hero {
	background-image: radial-gradient(rgba(138, 131, 120, 0.08) 1px, transparent 1.4px);
	background-size: 7px 7px;
	overflow: hidden;
	position: relative;
}

.pm-hero .pm-band-inner {
	padding-block: clamp(3rem, 4vw + 1.5rem, 6rem);
	position: relative;
}

.pm-hero-grid {
	align-items: center;
	display: grid;
	gap: 40px;
	grid-template-columns: 1.08fr 0.92fr;
}

.pm-hero-copy,
.pm-hero-copy > * {
	min-width: 0;
}

.pm-hero-copy .pm-hero-title {
	margin-top: 0;
}

@media (max-width: 840px) {
	.pm-hero-grid {
		gap: var(--wp--preset--spacing--60, 1.9rem);
		grid-template-columns: minmax(0, 1fr);
	}
}

/* F2 `.hero p.sub` — the hero's opening line, held to the reading measure.
   `--fs-md` (19px), NOT the body scale: the audit measured 20px here against
   F2's 19.006px, because one flat scale was serving both roles. */
.pm-hero-intro {
	font-size: 1.118rem;
	margin: var(--wp--preset--spacing--40, 1rem) 0 var(--wp--preset--spacing--60, 1.9rem);
	max-width: var(--wp--custom--measure, 66ch);
}

/* F2's inverse festival band. Gutenberg columns are normalized into the
   measured 1.15/.85 grid so the text and poster keep the target relationship. */
.pm-band-feature {
	color: var(--wp--preset--color--cream);
	overflow: hidden;
	position: relative;
}

.pm-band-feature::before,
.pm-band-feature::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

.pm-band-feature::before {
	background: var(--wp--preset--color--coral);
	border-radius: var(--wp--custom--radius--blob-1);
	height: 170px;
	opacity: 0.9;
	right: 26%;
	top: -70px;
	width: 210px;
}

.pm-band-feature::after {
	background: var(--wp--preset--color--sky);
	border-radius: var(--wp--custom--radius--blob-2);
	bottom: -58px;
	height: 130px;
	left: -30px;
	opacity: 0.3;
	width: 150px;
}

.pm-band-feature .pm-band-inner {
	position: relative;
	z-index: 1;
}

.pm-band-feature .pm-inner {
	align-items: center;
	display: grid;
	gap: 40px;
	grid-template-columns: 1.15fr 0.85fr;
}

.pm-band-feature .pm-inner > .wp-block-column {
	margin-block: 0;
}

.pm-band-feature h2,
.pm-band-feature p {
	color: var(--wp--preset--color--cream);
}

.pm-band-feature .pm-band-kicker {
	color: var(--wp--preset--color--sky);
}

@media (max-width: 840px) {
	.pm-band-feature .pm-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* F2 `.hero .micro` — the small caps descriptor under the hero CTAs. */
.pm-hero-descriptor {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--caps, 0.08em);
	margin-top: var(--wp--preset--spacing--50, 1.4rem);
	text-transform: uppercase;
}

/* F2 `.kicker` — the eyebrow above the festival band heading. */
.pm-band-kicker {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--caps, 0.08em);
	margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
	text-transform: uppercase;
}

/* F2 `p.sec-intro` — the supporting line under a section heading. */
.pm-section-intro {
	color: var(--wp--preset--color--meta);
	margin: 0 0 var(--wp--preset--spacing--60, 1.9rem);
	max-width: var(--wp--custom--measure, 66ch);
}

/* F2 `.page-hero p.lead` — the lead paragraph of an interior page, at `--fs-md`. */
.pm-page-lead {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
	max-width: var(--wp--custom--measure, 66ch);
}

/* F2 `.meta-line` on the Resources cadence note. */
.pm-cadence-note {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Call-to-action rows ------------------------------------------------- */

/* F2 `.hero .ctas` — buttons and quiet buttons on one wrapping line. */
.pm-hero-cta-row,
.pm-support-card__ctas {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40, 1rem);
}

/* ---- Card and column grids ---------------------------------------------- */

/* F2 `.grid3` / `.why`: three columns on desktop, one column below 900px.
   Single column is the BASE so a narrow viewport needs no override. */
.pm-doors-cards,
.pm-why-columns {
	align-items: stretch;
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.4rem);
	grid-template-columns: 1fr;
}

.pm-doors-cards > .pm-doors-cards__item,
.pm-why-columns > .pm-why-columns__item {
	box-sizing: border-box;
	margin-block: 0;
}

.pm-doors-cards > .pm-doors-cards__item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

@media (min-width: 900px) {
	.pm-doors-cards,
	.pm-why-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* F2 `.card` — the surface the doors cards and the support card share. */
.pm-doors-cards__item,
.pm-support-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card, 14px);
	box-shadow: var(--wp--preset--shadow--whisper);
	overflow: hidden;
	padding: var(--wp--preset--spacing--50, 1.4rem);
	position: relative;
	transition: box-shadow var(--wp--custom--motion--duration-base, 200ms) var(--wp--custom--motion--easing, ease);
}

.pm-doors-cards__item:hover,
.pm-support-card:hover {
	box-shadow: var(--wp--preset--shadow--card);
}

/*
 * WP KEBAB RULE: a theme.json custom key is converted with DIGITS AS THEIR OWN
 * WORD, so `custom.radius.blob1` publishes `--wp--custom--radius--blob-1`, not
 * `--blob1`. The same rule already governs `motion.durationFast` above.
 *
 * F2 `.card .cardblob` — the organic corner accent that makes the three doors
 * read as three. F2 delivers it as an `aria-hidden` span inside the card; here
 * it is a pseudo-element, which is the same decoration with the same absence
 * from the accessibility tree, and which needs no change to stored body markup.
 */
.pm-doors-cards__item::before {
	content: "";
	height: 84px;
	opacity: 0.24;
	pointer-events: none;
	position: absolute;
	right: -30px;
	top: -34px;
	width: 96px;
}

.pm-doors-cards__item:nth-child(1)::before {
	background: var(--wp--preset--color--coral);
	border-radius: var(--wp--custom--radius--blob-1);
}

.pm-doors-cards__item:nth-child(2)::before {
	background: var(--wp--preset--color--ochre);
	border-radius: var(--wp--custom--radius--blob-2);
}

.pm-doors-cards__item:nth-child(3)::before {
	background: var(--wp--preset--color--sky);
	border-radius: var(--wp--custom--radius--blob-3);
}

.pm-doors-cards__item > :first-child,
.pm-support-card > :first-child {
	margin-top: 0;
}

.pm-doors-cards__item > :last-child,
.pm-support-card > :last-child {
	margin-bottom: 0;
}

/* F2 `.card h3` is `--fs-lg` (22px). The audit found "Programmes" and
   "Resources" CLIPPED at 157px of card width, so the title also declares how it
   breaks rather than relying on the column being wide enough. */
.pm-doors-cards__item h3 {
	font-size: 1.294rem;
	margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
	overflow-wrap: break-word;
	position: relative;
}

.pm-doors-cards__item p {
	color: var(--wp--preset--color--meta);
	font-size: 0.912rem;
	margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
}

/* F2 `.why h3` — each column is topped by a rule in a different brand colour,
   which is how the three pillars read as three. */
.pm-why-columns__item h3 {
	border-top: 3px solid var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.294rem;
	margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
	padding-top: var(--wp--preset--spacing--30, 0.5rem);
}

.pm-why-columns__item:nth-child(2) h3 {
	border-top-color: var(--wp--preset--color--communication-yellow);
}

.pm-why-columns__item:nth-child(3) h3 {
	border-top-color: var(--wp--preset--color--brand-red);
}

.pm-why-columns__item p {
	color: var(--wp--preset--color--meta);
	font-size: 0.912rem;
	margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
}

/* F2 `.brand-sep`: blue voice, yellow pause, red voice. One decorative
   pseudo-element keeps the motif aligned and absent from the a11y tree. */
.pm-why-columns::after {
	background:
		radial-gradient(ellipse 6px 7px at 6px 7px, var(--wp--preset--color--brand-blue) 98%, transparent 100%),
		radial-gradient(circle 4px at 28px 7px, var(--wp--preset--color--ochre) 98%, transparent 100%),
		linear-gradient(var(--wp--preset--color--ochre), var(--wp--preset--color--ochre)) 28px 3px / 28px 8px no-repeat,
		radial-gradient(circle 4px at 56px 7px, var(--wp--preset--color--ochre) 98%, transparent 100%),
		radial-gradient(ellipse 6px 7px at 78px 7px, var(--wp--preset--color--brand-red) 98%, transparent 100%);
	content: "";
	display: block;
	grid-column: 1 / -1;
	height: 14px;
	margin: var(--wp--preset--spacing--60, 1.9rem) auto 0;
	width: 84px;
}

/* The support card's body copy stays at the reading measure. */
.pm-support-card .pm-measure {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
}

.pm-support-card__ctas > * {
	margin-block: 0;
}

.pm-support-card__ctas .pm-route-link,
.pm-support-card__ctas .pm-route-link--static {
	align-items: center;
	cursor: default;
	display: inline-flex;
	min-height: 36px;
	text-decoration: none;
}

.pm-support-card .pm-static-control {
	cursor: default;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.6em 1.05em;
	text-decoration: none;
}

/* ---- Inert controls ------------------------------------------------------ */

/* F2 `span.btn.static` — looks like the control, IS NOT one. No pointer, no
   hover response, no focus ring: the element is not focusable and must not
   suggest it is. The exact redirection route is announced at launch, and until
   then this deliberately does nothing. */
.pm-static-control {
	background: var(--wp--preset--color--cta);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--white);
	cursor: default;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	opacity: 0.92;
	padding: 12px 22px;
	text-decoration: none;
}

/* F2 `.static-note` — the small print beside the inert control. */
.pm-static-note {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
}

/* ---- Same-page anchors --------------------------------------------------- */

/* An in-page `#fragment` link. It is a real link, so it keeps link behaviour;
   the modifier carries the presentation the F2 source authored for it. */
.pm-same-page-link {
	margin: 0;
}

.pm-same-page-link a {
	color: var(--wp--preset--color--cta);
	font-weight: 600;
	text-decoration: none;
}

.pm-same-page-link a:hover {
	text-decoration: underline;
}

/* F2 `.btn.quiet` — the outlined secondary button. */
.pm-same-page-link--btn-quiet a {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--ink);
	display: inline-block;
	padding: 0.7em 1.3em;
}

.pm-same-page-link--btn-quiet a:hover {
	background: var(--wp--preset--color--tint);
	text-decoration: none;
}

/* ---- Route links --------------------------------------------------------- */

/* The plugin emits the base hook plus exactly one modifier from its closed
   variant vocabulary; every rule below is the theme's. */
.pm-route-link {
	transition:
		background var(--wp--custom--motion--duration-fast, 140ms) var(--wp--custom--motion--easing, ease),
		transform var(--wp--custom--motion--duration-fast, 140ms) var(--wp--custom--motion--easing, ease);
}

/* F2: an unclassed managed link inside body copy. */
a.pm-route-link--default {
	color: var(--wp--preset--color--cta);
	text-decoration: none;
}

a.pm-route-link--default:hover {
	text-decoration: underline;
}

/* F2 `.card a.cardlink` — the action line closing a card. */
a.pm-route-link--cardlink {
	color: var(--wp--preset--color--cta);
	font-weight: 600;
	text-decoration: none;
}

a.pm-route-link--cardlink:hover {
	text-decoration: underline;
}

/* F2 `.btn` — the primary call to action. */
a.pm-route-link--btn {
	background: var(--wp--preset--color--cta);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--white);
	display: inline-block;
	font-weight: 600;
	padding: 0.7em 1.3em;
	text-decoration: none;
}

a.pm-route-link--btn:hover {
	background: var(--wp--preset--color--cta-hover);
	color: var(--wp--preset--color--white);
	transform: translateY(-1px);
}

/* F2 `.btn.quiet`. */
a.pm-route-link--btn-quiet {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--button, 10px);
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-weight: 600;
	padding: 0.7em 1.3em;
	text-decoration: none;
}

a.pm-route-link--btn-quiet:hover {
	background: var(--wp--preset--color--tint);
	transform: none;
}

/* DEGRADED. The target did not resolve to one published Page, so the plugin
   emitted a `<span>`. It keeps the editorial label and loses every affordance:
   no pointer, no underline, no hover response, and — because it is a span with
   no tabindex — no focus. It must never read as a link that happens to be
   broken. */
.pm-route-link--static {
	color: var(--wp--preset--color--meta);
	cursor: default;
	text-decoration: none;
	transform: none;
	transition: none;
}

.pm-route-link--static:hover {
	background: inherit;
	text-decoration: none;
	transform: none;
}

/* ---- Breadcrumbs --------------------------------------------------------- */

/* F2 `nav.crumbs`. The plugin emits the contracted `crumbs` hook first and the
   additive `pm-breadcrumbs` name second; both selectors are live. */
.crumbs,
.pm-breadcrumbs {
	color: var(--wp--preset--color--meta);
	font-size: 0.853rem;
	padding: var(--wp--preset--spacing--40, 1rem) 0 0;
}

/* F2 draws the trail inside `.wrap`, so the bar spans the wide container while
   the page title below stays in the reading column. The block emits its own
   wrapper (`wrap pm-breadcrumbs__wrap`); the theme sizes it rather than leaving
   a plugin hook unstyled. */
.pm-breadcrumbs__wrap {
	margin-inline: auto;
	max-width: calc(var(--wp--style--global--wide-size) - var(--wp--custom--container-pad, 20px) * 2);
}

.pm-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* F2 draws the separator in CSS with EMPTY alternative text, so it is not
   announced — the same rule the listing metadata separator follows. */
.pm-breadcrumbs__item + .pm-breadcrumbs__item::before {
	color: var(--wp--preset--color--hairline);
	content: "\2192" / "";
	margin-right: 0.4em;
}

a.pm-breadcrumbs__link {
	color: var(--wp--preset--color--cta);
	text-decoration: none;
}

a.pm-breadcrumbs__link:hover {
	text-decoration: underline;
}

/* DEGRADED Home crumb: same label, no affordance. */
.pm-breadcrumbs__link--static {
	color: var(--wp--preset--color--meta);
	cursor: default;
	text-decoration: none;
}

.pm-breadcrumbs__link--static:hover {
	text-decoration: none;
}

.pm-breadcrumbs__current {
	color: var(--wp--preset--color--meta);
}

/* ---- Fallback notice ----------------------------------------------------- */

/* F2 `.notice`. It ships `hidden` and stays hidden until `?fallback=1` reveals
   it (assets/js/fallback-notice.js). `[hidden]` is restated because a `display`
   rule on the base selector would otherwise defeat the attribute. */
.notice {
	background: var(--wp--preset--color--tint);
	border: 1px dashed var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card, 14px);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--50, 1.4rem);
	padding: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--50, 1.4rem);
}

.notice[hidden] {
	display: none;
}

/* The notice takes focus when revealed, so it must show a focus ring even
   though it is not otherwise interactive. */
.notice:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Composed page surfaces (G3) and the event family (G7).

   The body carries structure — full-bleed bands, their wide inner containers,
   two-column composition and the scoped event markers. Every visual decision
   about those surfaces is made here, per COMPOSITION_CONTRACT.md §9. Without
   these rules the markers are inert: implementation-1 emitted them and the
   theme consumed none of them.

   The grid shapes are the MEASURED F2 shapes, not invented ones: the fest
   "Pe scurt" grid measures two columns at 1440x1000 and one at 390x844.
   --------------------------------------------------------------------------- */

.pm-band-inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--custom--container-pad, 20px);
	padding-block: var(--wp--preset--spacing--60, 3rem);
	width: 100%;
}

/* ---- Remaining pages, batch 1: Hub / Resources / Science ---------------
 *
 * F2 gives every interior page the same wide page-hero wrap and a 66ch lead,
 * then lets the page family own its sections. WordPress's constrained root
 * otherwise centres the title in the 680px reading column, applies its 25.5px
 * block gap between every body child and resolves the colliding `large` and
 * `x-large` preset names to Core's 36px/42px defaults. Literal rem values below
 * are the F2 tokens projected through the accepted 17px root, just as the
 * approved About rules do.
 */
.page-template-page-hub .pm-main {
	margin-block-start: 0;
	padding-top: 0;
}

.page-template-page-resources .pm-main {
	margin-block-start: 0;
	padding-top: 0;
}

.page-template-page-science-index .pm-main {
	margin-block-start: 0;
	padding-top: 0;
}

.page-template-page-hub .pm-main > .pm-page-title,
.page-template-page-resources .pm-main > .pm-page-title,
.page-template-page-science-index .pm-main > .pm-page-title {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	font-weight: 800;
	line-height: 1.06;
	margin: 48px auto 16px;
	max-width: calc(var(--wp--style--global--wide-size) - 40px);
	width: 100%;
}

.page-template-page-hub .pm-main > .wp-block-post-content,
.page-template-page-resources .pm-main > .wp-block-post-content,
.page-template-page-science-index .pm-main > .wp-block-post-content {
	font-size: 1rem;
	margin-block-start: 0;
}

.page-template-page-hub .wp-block-post-content > *,
.page-template-page-resources .wp-block-post-content > *,
.page-template-page-science-index .wp-block-post-content > * {
	margin-block-start: 0;
}

.page-template-page-hub .pm-page-lead,
.page-template-page-resources .pm-page-lead,
.page-template-page-science-index .pm-page-lead {
	font-size: 1.118rem;
	line-height: 1.6;
	margin-block: 0 32px;
	max-width: 66ch;
	width: calc(100% - 40px);
}

.page-template-page-hub .wp-block-post-content > .pm-page-lead,
.page-template-page-resources .wp-block-post-content > .pm-page-lead,
.page-template-page-science-index .wp-block-post-content > .pm-page-lead {
	margin-inline-end: auto !important;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2)) !important;
}

/* Hub index: F2 `.grid2`, `.card` and `.empty`, retained as native groups by
 * the corpus builder so no item identity is inferred from root-block order. */
.page-template-page-hub .wp-block-post-content > .pm-section-heading,
.page-template-page-hub .wp-block-post-content > .pm-hub-grid,
.page-template-page-hub .wp-block-post-content > .pm-empty-state {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--wp--style--global--wide-size) - 40px);
	width: calc(100% - 40px);
}

.page-template-page-hub .wp-block-post-content > .pm-section-heading {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
	margin-block: 0 12px;
}

.page-template-page-hub .pm-hub-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 24px;
}

.page-template-page-hub .pm-hub-grid > .pm-hub-card {
	margin-block-start: 0;
	min-width: 0;
}

.page-template-page-hub .pm-hub-card {
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-radius: var(--wp--custom--radius--card, 14px);
	box-shadow: var(--wp--preset--shadow--whisper);
	box-sizing: border-box;
	overflow: hidden;
	padding: 24px;
	position: relative;
	transition: box-shadow 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-template-page-hub .pm-hub-card:hover {
	box-shadow: var(--wp--preset--shadow--card);
}

.page-template-page-hub .pm-hub-card > * {
	margin-block-start: 0;
}

.page-template-page-hub .pm-hub-card .pm-thumb {
	margin: 0 0 12px;
}

.page-template-page-hub .pm-hub-card .pm-inline-run {
	font-size: 1rem;
	line-height: 1.4;
	margin: 0 0 8px;
}

.page-template-page-hub .pm-hub-card h3 {
	font-size: 1.294rem;
	line-height: 1.15;
	margin: 8px 0;
}

.page-template-page-hub .pm-hub-card p:not(.pm-inline-run) {
	color: var(--wp--preset--color--meta);
	font-size: 0.912rem;
	line-height: 1.6;
	margin: 0 0 12px;
}

.page-template-page-hub .pm-hub-card .pm-meta-line {
	font-size: 0.853rem;
}

.page-template-page-hub .pm-hub-card .pm-route-link--cardlink {
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.page-template-page-hub .pm-hub-card .pm-route-link--cardlink:hover {
	text-decoration: underline;
}

.page-template-page-hub .wp-block-post-content > .pm-meta-line {
	margin-block: 0 48px;
	margin-inline-end: auto !important;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2)) !important;
	max-width: 66ch;
	width: calc(100% - 40px);
}

.page-template-page-hub .pm-empty-state {
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-radius: var(--wp--custom--radius--card, 14px);
	color: var(--wp--preset--color--meta);
	max-width: min(66ch, calc(100% - 40px));
	padding: 24px;
}

.page-template-page-hub .pm-empty-state > * {
	margin: 0;
}

/* Resources: Core already emits the exact feature/grid/shelf semantics. The
 * template only restores the F2 wide wrap, collision-proof type sizes and the
 * shelf's real grid row instead of the legacy rounded flex card. */
.page-template-page-resources .wp-block-play-matters-managed-listing {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--wp--style--global--wide-size) - 40px);
	width: calc(100% - 40px);
}

.page-template-page-resources .pm-listing--reference-shelf {
	margin-block-start: 48px;
}

.page-template-page-resources .card.art-card h3 {
	font-size: 1.294rem;
}

.page-template-page-resources .pm-listing__heading {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
	margin: 0 0 8px;
}

.page-template-page-resources .pm-listing__intro {
	color: var(--wp--preset--color--meta);
	margin: 0 0 24px;
	max-width: 66ch;
}

.page-template-page-resources .pm-listing__rows {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card, 14px);
	gap: 0;
	overflow: hidden;
}

.page-template-page-resources .pm-listing__row {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: 64px minmax(0, 1fr);
	overflow: visible;
	padding: 16px;
}

.page-template-page-resources .pm-listing__row:last-child {
	border-bottom: 0;
}

.page-template-page-resources .pm-listing__row .pm-listing__title {
	font-family: var(--wp--preset--font-family--text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 2px;
}

.page-template-page-resources .pm-listing__row .pm-listing__excerpt {
	font-size: 0.853rem;
	margin: 0;
}

.page-template-page-resources .pm-listing__row .pm-listing__badge {
	display: none;
}

.page-template-page-resources .pm-listing__supporting {
	color: var(--wp--preset--color--ink);
	margin: 20px 0 0;
}

.page-template-page-resources .pm-cadence-note {
	margin: 24px auto 0;
	margin-inline: auto;
	max-width: 66ch;
}

/* Science index: prose and media keep the reading measure; the one promoted
 * pillar remains a wide F2 card with its own structural hook. */
.page-template-page-science-index .wp-block-post-content > h2,
.page-template-page-science-index .wp-block-post-content > p:not(.pm-page-lead),
.page-template-page-science-index .wp-block-post-content > .wp-block-image {
	box-sizing: border-box;
	margin-inline-end: auto;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2));
	max-width: 66ch;
	width: calc(100% - 40px);
}

.page-template-page-science-index .wp-block-post-content > h2 {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
	margin-bottom: 12px;
}

.page-template-page-science-index .wp-block-post-content > h2 + p {
	margin-bottom: 48px;
}

.page-template-page-science-index .wp-block-image {
	margin-bottom: 48px;
}

.page-template-page-science-index .wp-block-image img {
	border-radius: var(--wp--custom--radius--media, 18px);
	height: auto;
	width: 100%;
}

.page-template-page-science-index .pm-science-card {
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-left: 4px solid var(--wp--preset--color--coral);
	border-radius: var(--wp--custom--radius--card, 14px);
	box-shadow: var(--wp--preset--shadow--whisper);
	box-sizing: border-box;
	margin: 0 auto 48px;
	max-width: calc(var(--wp--style--global--wide-size) - 40px);
	padding: 32px;
	width: calc(100% - 40px);
}

.page-template-page-science-index .pm-science-card > * {
	margin-block-start: 0;
}

.page-template-page-science-index .pm-science-card .pm-thumb--pillar {
	margin: 0 0 16px;
	max-width: 150px;
}

.page-template-page-science-index .pm-science-card .pm-inline-run {
	margin: 0 0 8px;
}

.page-template-page-science-index .pm-science-card h3 {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
	margin: 0 0 12px;
}

.page-template-page-science-index .pm-science-card .pm-measure,
.page-template-page-science-index .pm-science-card .pm-meta-line {
	font-size: 0.912rem;
}

.page-template-page-science-index .pm-science-card .pm-measure {
	margin: 0 0 16px;
}

.page-template-page-science-index .pm-science-card .pm-meta-line {
	margin: 16px 0 0;
}

@media (max-width: 900px) {
	.page-template-page-hub .pm-hub-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 840px) {
	.page-template-page-hub .pm-main > .pm-page-title,
	.page-template-page-resources .pm-main > .pm-page-title,
	.page-template-page-science-index .pm-main > .pm-page-title {
		margin-top: 32px;
	}
}

@media (max-width: 600px) {
	.page-template-page-resources .pm-listing--reference-shelf {
		margin-block-start: 32px;
	}

	.page-template-page-resources .pm-listing__row {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.page-template-page-resources .pm-listing__row > .pm-listing__badge {
		grid-column: 2;
	}

	.page-template-page-science-index .pm-science-card {
		padding: 24px;
	}
}

/* ---- About / narrative parity -------------------------------------------
 *
 * These rules consume only the structure emitted from F2's two About sources.
 * The template scope is deliberate: homepage roles and other composed page
 * families retain their already-verified dimensions and spacing.
 */
.page-template-page-narrative .pm-main {
	padding-top: 0;
}

.page-template-page-narrative .pm-main > .pm-page-title {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	font-weight: 800;
	line-height: 1.06;
	margin: 48px auto 16px;
	max-width: calc(var(--wp--style--global--wide-size) - 40px);
	width: 100%;
}

.page-template-page-narrative .pm-main > .wp-block-post-content {
	margin-block-start: 0;
}

.page-template-page-narrative .pm-band-inner {
	padding-block: clamp(48px, 4vw + 24px, 96px);
	padding-inline: 20px;
}

.page-template-page-narrative .pm-page-hero .pm-band-inner {
	padding-block: 0 32px;
}

.page-template-page-narrative .pm-page-lead {
	font-size: 1.118rem;
	line-height: 1.6;
	margin: 0;
	max-width: 66ch;
}

.page-template-page-narrative .pm-band-inner h2 {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
}

.page-template-page-narrative .pm-band-inner h3 {
	font-size: 1.294rem;
	line-height: 1.15;
}

.page-template-page-narrative .pm-band-inner > :first-child {
	margin-top: 0;
}

.page-template-page-narrative .pm-band-inner > :last-child {
	margin-bottom: 0;
}

.page-template-page-narrative .pm-pullquote {
	border-left: 3px solid var(--wp--preset--color--coral);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	font-style: normal;
	line-height: 1.15;
	margin: 32px 0;
	max-width: 30ch;
	padding-left: 24px;
}

.page-template-page-narrative .pm-pullquote p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.page-template-page-narrative .pm-values-list {
	counter-reset: pm-value;
	list-style: none;
	margin: 0;
	max-width: 66ch;
	padding: 0;
}

.page-template-page-narrative .pm-values-list li {
	border-bottom: 1px solid var(--wp--preset--color--border);
	counter-increment: pm-value;
	padding: 16px 0 16px 56px;
	position: relative;
}

.page-template-page-narrative .pm-values-list li:last-child {
	border-bottom: 0;
}

.page-template-page-narrative .pm-values-list li::before {
	background: var(--wp--preset--color--tint);
	border-radius: var(--wp--custom--radius--blob-3, 52% 48% 35% 65% / 55% 45% 60% 40%);
	content: counter(pm-value);
	display: grid;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	height: 38px;
	left: 0;
	place-items: center;
	position: absolute;
	top: 16px;
	width: 38px;
}

.page-template-page-narrative .pm-values-list strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.294rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 4px;
}

.page-template-page-narrative .pm-two-column {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 500px) minmax(0, 500px);
	margin-block: 0;
}

.page-template-page-narrative .pm-two-column > .wp-block-column {
	margin-block: 0;
	min-width: 0;
}

.page-template-page-narrative .pm-two-column h3 {
	border-top: 3px solid var(--wp--preset--color--sky);
	margin: 0 0 12px;
	padding-top: 12px;
}

.page-template-page-narrative .pm-two-column > .wp-block-column:nth-child(2) h3 {
	border-top-color: var(--wp--preset--color--ochre);
}

.page-template-page-narrative .pm-link--btn {
	background: var(--wp--preset--color--cta);
	border: 0;
	border-radius: 10px;
	color: var(--wp--preset--color--white);
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	padding: 12px 22px;
	text-decoration: none;
	transition: background-color 140ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-template-page-narrative .pm-link--btn:hover {
	background: var(--wp--preset--color--cta-hover);
	color: var(--wp--preset--color--white);
	transform: translateY(-1px);
}

.page-template-page-narrative .pm-link--btn.pm-quiet {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.page-template-page-narrative .pm-link--btn.pm-quiet:hover {
	background: #F0EADC;
	color: var(--wp--preset--color--ink);
	transform: none;
}

.page-template-page-narrative .pm-legal-panel {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	line-height: 1.7;
	max-width: 66ch;
	padding: 24px 32px;
}

.page-template-page-narrative .pm-legal-panel p {
	margin: 0;
}

@media (max-width: 840px) {
	.page-template-page-narrative .pm-main > .pm-page-title {
		margin-top: 32px;
	}

	.page-template-page-narrative .pm-two-column {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The event hero: navy full-bleed band carrying the intro and the poster. */
.pm-event-hero {
	color: var(--wp--preset--color--cream);
}

.pm-event-hero a:not(.wp-element-button) {
	color: var(--wp--preset--color--cream);
}

.pm-event-hero .pm-inner {
	align-items: center;
	gap: var(--wp--preset--spacing--60, 3rem);
}

/* The poster, and its caption treatment. */
.pm-poster img {
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(30, 51, 80, 0.28);
	transform: rotate(1.6deg);
}

.pm-poster figcaption,
.pm-poster .wp-element-caption {
	color: var(--wp--preset--color--cream);
	font-size: 0.875rem;
	margin-top: 0.75rem;
	opacity: 0.85;
	transform: none;
}

/* "Pe scurt" — the measured 2x2 answer grid, stacking to one column on mobile. */
.pm-answers {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pm-answers > .wp-block-column {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40, 1.5rem);
}

/* The funding callout. */
.pm-transparency {
	border-left: 3px solid var(--wp--preset--color--cta);
	color: var(--wp--preset--color--meta);
	font-size: 0.9375rem;
	padding-left: var(--wp--preset--spacing--40, 1.5rem);
}

/* The illustration trio, and one illustration within it. */
.pm-illustration-trio {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pm-illustration {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pm-illustration .pm-figure-caption {
	color: var(--wp--preset--color--meta);
	font-size: 0.875rem;
	margin: 0;
}

/* The media figure's own caption. Every value is F2 `.media-cap`'s own, in the
   theme's vocabulary: --fs-xs and x-small are both 0.765rem, --color-text-meta
   resolves to --pm-meta #6E6759 which is the `meta` preset, and --sp-2 is 8px,
   which is what theme.json names spacing 30. `max-width` and `line-height` have
   no preset and are F2's literals. Nothing here is chosen. */
.pm-media-figure .pm-figure-caption {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	margin: var(--wp--preset--spacing--30, 0.471rem) 0 0;
	max-width: 52ch;
}

/* The partnership CTA: an INSET card, never a full-bleed band. */
.pm-cta-band {
	border-radius: 10px;
	color: var(--wp--preset--color--cream);
	margin-block: var(--wp--preset--spacing--60, 3rem);
	padding: var(--wp--preset--spacing--60, 3rem);
}

.pm-cta-band a:not(.wp-element-button) {
	color: var(--wp--preset--color--cream);
}

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

	.pm-illustration-trio {
		grid-template-columns: minmax(0, 1fr);
	}

	.pm-event-hero .pm-inner {
		gap: var(--wp--preset--spacing--40, 1.5rem);
	}
}

/* Dynamic event-detail block. The calendar stylesheet is intentionally not
 * loaded on this route, so its generated markup owns containment here. */
.pm-event-details {
	box-sizing: border-box;
	inline-size: min(calc(100% - 40px), 680px);
	margin-inline: auto;
	min-inline-size: 0;
}

.pm-event-details__header,
.pm-event-details__facts,
.pm-event-details__body {
	max-inline-size: 100%;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.pm-event-details__poster {
	margin-inline: 0;
	max-inline-size: 100%;
}

.pm-event-details__poster img {
	block-size: auto;
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
}

/* ---- Remaining pages, batch 2: Event / Programme ------------------------ */

/* These six exact F2 pages place their H1 inside the authored hero. Their
 * Gutenberg bodies therefore own the heading, while these two templates own
 * only the full-width geometry and F2 presentation. Literal rem values are the
 * F2 tokens projected through the accepted 17px root. */
.page-template-page-event .pm-main {
	margin-block-start: 0;
	padding-top: 0;
}

.page-template-page-programme .pm-main {
	margin-block-start: 0;
	padding-top: 0;
}

.page-template-page-event .pm-main > .wp-block-post-content,
.page-template-page-programme .pm-main > .wp-block-post-content {
	font-size: 1rem;
	line-height: 1.6;
	margin-block-start: 0;
}

.page-template-page-event .wp-block-post-content > *,
.page-template-page-programme .wp-block-post-content > * {
	margin-block-start: 0;
}

.page-template-page-event .pm-band-inner,
.page-template-page-programme .pm-band-inner {
	padding-block: clamp(48px, 4vw + 24px, 96px);
	padding-inline: 20px;
}

.page-template-page-event .pm-band-inner > *,
.page-template-page-programme .pm-band-inner > * {
	margin-block-start: 0;
}

.page-template-page-event .pm-band-inner > :first-child,
.page-template-page-programme .pm-band-inner > :first-child {
	margin-top: 0;
}

.page-template-page-event .pm-band-inner > :last-child,
.page-template-page-programme .pm-band-inner > :last-child {
	margin-bottom: 0;
}

/* F2 explicitly zeroes the top padding of sections that continue the same
 * composition. Express that relation through adjacent owned modules. */
.page-template-page-event .pm-page-hero + .pm-band .pm-band-inner,
.page-template-page-programme .pm-page-hero + .pm-band .pm-band-inner,
.page-template-page-event .pm-band + .pm-band .pm-band-inner,
.page-template-page-programme .pm-band + .pm-band .pm-band-inner {
	padding-top: 0;
}

.page-template-page-event .pm-page-hero,
.page-template-page-programme .pm-page-hero {
	overflow: hidden;
	position: relative;
}

.page-template-page-event .pm-page-hero::after,
.page-template-page-programme .pm-page-hero::after {
	border-radius: 56% 44% 66% 34% / 42% 62% 38% 58%;
	content: "";
	height: 126px;
	opacity: 0.3;
	pointer-events: none;
	position: absolute;
	right: -40px;
	top: -30px;
	width: 150px;
}

.page-template-page-event .pm-page-hero::after {
	background: var(--wp--preset--color--coral);
}

.page-template-page-programme .pm-page-hero::after {
	background: var(--wp--preset--color--ochre);
}

.page-template-page-event .pm-page-hero .pm-band-inner,
.page-template-page-programme .pm-page-hero .pm-band-inner {
	padding-block: 48px 32px;
	position: relative;
	z-index: 1;
}

.page-template-page-event .pm-page-hero .pm-band-inner > p:first-child,
.page-template-page-programme .pm-page-hero .pm-band-inner > p:first-child {
	margin: 0 0 12px;
}

.page-template-page-event .pm-page-hero h1,
.page-template-page-programme .pm-page-hero h1 {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	font-weight: 800;
	line-height: 1.06;
	margin: 0 0 16px;
	max-width: 24ch;
}

.page-template-page-event .pm-page-lead,
.page-template-page-programme .pm-page-lead {
	font-size: 1.118rem;
	line-height: 1.6;
	margin: 0;
	max-width: 66ch;
}

/* The game-night identity strip is one semantic paragraph painted full-width;
 * its text keeps the shared 1040px wrap and the 20px mobile gutter. */
.page-template-page-event .wp-block-post-content > .pm-inline-run {
	background: var(--wp--preset--color--tint);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	box-sizing: border-box;
	color: var(--wp--preset--color--meta);
	font-size: 0.853rem;
	line-height: 1.6;
	margin: 0;
	max-width: none;
	padding-block: 9px;
	padding-inline: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2));
	width: 100%;
}

/* Fest: the dark band owns the display title, 575/425 split and poster. */
.page-template-page-event .pm-event-hero {
	margin-top: 16px;
	overflow: hidden;
	position: relative;
}

.page-template-page-event .pm-event-hero::before,
.page-template-page-event .pm-event-hero::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

.page-template-page-event .pm-event-hero::before {
	background: var(--wp--preset--color--coral);
	border-radius: 58% 42% 61% 39% / 45% 59% 41% 55%;
	height: 170px;
	right: 26%;
	top: -70px;
	width: 210px;
}

.page-template-page-event .pm-event-hero::after {
	background: var(--wp--preset--color--sky);
	border-radius: 41% 59% 36% 64% / 58% 37% 63% 42%;
	bottom: -58px;
	height: 130px;
	left: -30px;
	opacity: 0.3;
	width: 150px;
}

.page-template-page-event .pm-event-hero .pm-band-inner {
	position: relative;
	z-index: 1;
}

.page-template-page-event .pm-event-hero .pm-inner {
	align-items: center;
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 575px) minmax(0, 425px);
	margin: 0;
}

.page-template-page-event .pm-event-hero .pm-inner > .wp-block-column {
	margin: 0;
	min-width: 0;
}

.page-template-page-event .pm-event-hero .pm-inner > .wp-block-column > * {
	margin-block-start: 0;
}

.page-template-page-event .pm-event-hero .pm-kicker {
	color: var(--wp--preset--color--ochre);
	margin: 0 0 8px;
}

.page-template-page-event .pm-event-hero h1 {
	color: var(--wp--preset--color--cream);
	font-size: clamp(2.118rem, 1.4rem + 3.4vw, 3.529rem);
	font-weight: 800;
	line-height: 1.06;
	margin: 0 0 16px;
}

.page-template-page-event .pm-event-hero p:not(.pm-kicker) {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 16px;
	max-width: 66ch;
}

.page-template-page-event .pm-event-hero p:last-child {
	margin-bottom: 0;
}

.page-template-page-event .pm-poster {
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(30, 51, 80, 0.28);
	justify-self: end;
	margin: 0;
	max-width: 420px;
	overflow: hidden;
	transform: rotate(1.6deg);
}

.page-template-page-event .pm-poster img {
	border-radius: 0;
	box-shadow: none;
	display: block;
	height: auto;
	transform: none;
	width: 100%;
}

.page-template-page-event .pm-poster figcaption,
.page-template-page-event .pm-poster .wp-element-caption {
	color: rgba(250, 246, 238, 0.75);
	font-size: 0.765rem;
	line-height: 1.5;
	margin: 0;
	padding: 8px 12px 0;
}

/* Shared Event/Programme content rhythm and answer tiles. */
.page-template-page-event .pm-band-inner h2,
.page-template-page-programme .pm-band-inner h2,
.page-template-page-event .pm-cta-band h2,
.page-template-page-programme .pm-cta-band h2 {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
	margin: 0 0 12px;
}

.page-template-page-event .pm-band-inner > h2:not(:first-child),
.page-template-page-programme .pm-band-inner > h2:not(:first-child) {
	margin-top: 32px;
}

.page-template-page-event .pm-answers + h2,
.page-template-page-programme .pm-answers + h2 {
	margin-top: 48px;
}

.page-template-page-event .pm-band-inner > p,
.page-template-page-programme .pm-band-inner > p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 16px;
}

/* Gutenberg emits the source-owned lead and metadata roles as paragraphs;
 * their F2 tokens must win over the generic band-paragraph rule above. */
.page-template-page-event .pm-page-hero .pm-band-inner > .pm-page-lead,
.page-template-page-programme .pm-page-hero .pm-band-inner > .pm-page-lead {
	font-size: 1.118rem;
}

.page-template-page-event .pm-band-inner > .pm-meta-line,
.page-template-page-programme .pm-band-inner > .pm-meta-line {
	font-size: 0.853rem;
}

.page-template-page-event .pm-answers,
.page-template-page-programme .pm-answers {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.page-template-page-event .pm-answers > .wp-block-column,
.page-template-page-programme .pm-answers > .wp-block-column {
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-radius: 14px;
	box-sizing: border-box;
	margin: 0;
	min-width: 0;
	padding: 16px 24px;
}

.page-template-page-event .pm-answers > .wp-block-column > *,
.page-template-page-programme .pm-answers > .wp-block-column > * {
	margin: 0;
}

.page-template-page-event .pm-answers .pm-kicker,
.page-template-page-programme .pm-answers .pm-kicker {
	font-size: 0.765rem;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.page-template-page-event .pm-transparency,
.page-template-page-programme .pm-transparency {
	background: var(--wp--preset--color--card);
	border-left: 3px solid var(--wp--preset--color--ochre);
	border-radius: 0 6px 6px 0;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	margin: 32px 0 0;
	max-width: 66ch;
	padding: 12px 16px;
}

.page-template-page-event .pm-transparency > *,
.page-template-page-programme .pm-transparency > * {
	margin: 0;
}

/* Fest gallery: three, two, then one column at the exact F2 breakpoints. */
.page-template-page-event .pm-illustration-trio {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
}

.page-template-page-event .pm-illustration {
	background: var(--wp--preset--color--tint);
	border: 1px dashed #CFC7B4;
	border-radius: 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	padding: 16px;
}

.page-template-page-event .pm-illustration .pm-art {
	width: 100%;
}

.page-template-page-event .pm-illustration .pm-figure-caption {
	font-size: 0.765rem;
	line-height: 1.5;
	margin: auto 0 0;
	padding-top: 12px;
}

.page-template-page-event .pm-media-figure,
.page-template-page-programme .pm-media-figure {
	margin: 32px 0;
	max-width: 420px;
}

.page-template-page-event .pm-media-figure > *,
.page-template-page-programme .pm-media-figure > * {
	margin-block-start: 0;
}

/* F2 page-level CTA: the section owns the outer 20px gutter and the two source
 * blobs become non-semantic pseudo-elements because the builder discards them. */
.page-template-page-event .pm-cta-band,
.page-template-page-programme .pm-cta-band {
	border-radius: 14px;
	box-sizing: border-box;
	margin: 0 auto clamp(48px, 4vw + 24px, 96px);
	max-width: 1040px;
	overflow: hidden;
	padding: 48px 32px;
	position: relative;
	width: calc(100% - 40px);
}

.page-template-page-event .pm-cta-band::before,
.page-template-page-programme .pm-cta-band::before,
.page-template-page-event .pm-cta-band::after,
.page-template-page-programme .pm-cta-band::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

.page-template-page-event .pm-cta-band::before,
.page-template-page-programme .pm-cta-band::before {
	background: var(--wp--preset--color--coral);
	border-radius: 58% 42% 61% 39% / 45% 59% 41% 55%;
	height: 130px;
	opacity: 0.9;
	right: -30px;
	top: -46px;
	width: 160px;
}

.page-template-page-event .pm-cta-band::after,
.page-template-page-programme .pm-cta-band::after {
	background: var(--wp--preset--color--sky);
	border-radius: 41% 59% 36% 64% / 58% 37% 63% 42%;
	bottom: -58px;
	height: 120px;
	left: -36px;
	opacity: 0.35;
	width: 150px;
}

.page-template-page-event .pm-cta-band > *,
.page-template-page-programme .pm-cta-band > * {
	margin-block-start: 0;
	position: relative;
	z-index: 1;
}

.page-template-page-event .pm-cta-band h2,
.page-template-page-programme .pm-cta-band h2 {
	color: var(--wp--preset--color--cream);
}

.page-template-page-event .pm-cta-band p,
.page-template-page-programme .pm-cta-band p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 66ch;
}

.page-template-page-event .pm-cta-band p:last-child,
.page-template-page-programme .pm-cta-band p:last-child {
	margin-bottom: 0;
}

.page-template-page-event .pm-cta-band .pm-static-control,
.page-template-page-programme .pm-cta-band .pm-static-control,
.page-template-page-event .pm-event-hero .pm-static-control {
	font-size: 16px;
	padding: 12px 22px;
}

.page-template-page-event .pm-cta-band .pm-static-note,
.page-template-page-programme .pm-cta-band .pm-static-note,
.page-template-page-event .pm-event-hero .pm-static-note {
	color: rgba(250, 246, 238, 0.75);
	font-size: 0.765rem;
}

@media (max-width: 840px) {
	.page-template-page-event .pm-event-hero .pm-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-template-page-event .pm-poster {
		justify-self: start;
		max-width: 340px;
	}

	.page-template-page-event .pm-illustration-trio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.page-template-page-event .pm-answers,
	.page-template-page-programme .pm-answers {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-template-page-event .pm-cta-band::before,
	.page-template-page-programme .pm-cta-band::before {
		opacity: 0.55;
		right: -84px;
		top: -84px;
	}
}

@media (max-width: 520px) {
	.page-template-page-event .pm-illustration-trio {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Remaining pages, batch 3: Article / Pillar ------------------------- */

/* F2 aligns the 66ch article to the LEFT edge of the 1040px inner wrap. Core's
 * constrained post-content centres that column and the alignfull wrapper can
 * leave mobile text at x=0, so both axes are owned explicitly here. */
.page-template-page-article .pm-main {
	margin-block-start: 0;
	padding-top: 0;
}

.page-template-page-pillar .pm-main {
	margin-block-start: 0;
	padding-top: 0;
}

.page-template-page-article .pm-main > .wp-block-post-content,
.page-template-page-pillar .pm-main > .wp-block-post-content {
	font-size: 1rem;
	line-height: 1.6;
	margin-block-start: 0;
	padding-block: clamp(48px, 4vw + 24px, 96px);
}

.page-template-page-article .wp-block-post-content > *,
.page-template-page-pillar .wp-block-post-content > * {
	box-sizing: border-box;
	margin-inline-end: auto !important;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2)) !important;
	max-width: var(--wp--style--global--content-size);
	width: calc(100% - 40px);
}

.page-template-page-article .wp-block-post-content > :first-child,
.page-template-page-pillar .wp-block-post-content > :first-child {
	margin-top: 0;
}

.page-template-page-article .wp-block-post-content > p,
.page-template-page-pillar .wp-block-post-content > p {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 16px;
	margin-top: 0;
}

.page-template-page-article .pm-article-category,
.page-template-page-article .pm-inline-run,
.page-template-page-pillar .pm-inline-run {
	margin-bottom: 8px;
}

.page-template-page-article .pm-article-title,
.page-template-page-pillar .wp-block-post-content > h1 {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 0;
	margin-top: 12px;
	max-width: var(--wp--style--global--content-size);
}

.page-template-page-article .wp-block-post-content > .pm-article-dek {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.294rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 12px 0 16px;
	max-width: 36ch;
}

.page-template-page-article .wp-block-post-content > .pm-article-byline {
	color: var(--wp--preset--color--meta);
	font-size: 0.853rem;
	line-height: 1.6;
	margin: 0 0 24px;
}

.page-template-page-article .pm-article-author {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.page-template-page-article .wp-block-post-content > .pm-piece-meta,
.page-template-page-pillar .wp-block-post-content > .pm-piece-meta,
.page-template-page-article .wp-block-post-content > .pm-support-line {
	color: var(--wp--preset--color--meta);
	font-size: 0.853rem;
	line-height: 1.6;
	margin: 8px 0 24px;
}

.page-template-page-article .pm-article-hero {
	margin-bottom: 32px;
	margin-top: 24px;
}

.page-template-page-article .pm-article-hero img {
	border-radius: 18px;
	display: block;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	width: 100%;
}

.page-template-page-article .pm-article-hero figcaption {
	color: var(--wp--preset--color--meta);
	font-size: 0.765rem;
	font-style: italic;
	line-height: 1.5;
	margin: 8px 0 0;
}

.page-template-page-article .wp-block-post-content > h2,
.page-template-page-pillar .wp-block-post-content > h2 {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
	margin-bottom: 12px;
	margin-top: 48px;
}

.page-template-page-article .wp-block-post-content > h3,
.page-template-page-pillar .wp-block-post-content > h3 {
	font-size: 1.294rem;
	line-height: 1.15;
	margin: 32px 0 12px;
}

.page-template-page-article .wp-block-post-content > ul,
.page-template-page-article .wp-block-post-content > ol,
.page-template-page-pillar .wp-block-post-content > ul,
.page-template-page-pillar .wp-block-post-content > ol {
	padding-left: 1.3em;
}

.page-template-page-article .wp-block-post-content > blockquote,
.page-template-page-pillar .wp-block-post-content > blockquote {
	border-left: 3px solid var(--wp--preset--color--coral);
	font-style: italic;
	margin-bottom: 24px;
	margin-top: 24px;
	padding-left: 16px;
}

.page-template-page-article .wp-block-image:not(.pm-article-hero) {
	margin-bottom: 32px;
	margin-top: 32px;
}

.page-template-page-article .wp-block-image:not(.pm-article-hero) img {
	border-radius: 18px;
	height: auto;
	width: 100%;
}

.page-template-page-article .wp-block-image figcaption,
.page-template-page-article .wp-block-gallery > figcaption {
	color: var(--wp--preset--color--meta);
	font-size: 0.765rem;
	font-style: italic;
	line-height: 1.5;
}

/* The F2 gallery balances any authored image count and wraps by available
 * width. Core's gallery stays native; only its presentation is projected. */
.page-template-page-article .wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 0;
	margin-top: 16px;
}

.page-template-page-article .wp-block-gallery > .wp-block-image {
	flex: 1 1 200px;
	margin: 0;
	min-width: 0;
}

.page-template-page-article .wp-block-gallery > .wp-block-image img {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	height: 100%;
	max-height: 360px;
	object-fit: cover;
	width: 100%;
}

.page-template-page-article .wp-block-gallery > figcaption {
	flex-basis: 100%;
	margin: 0;
}

.page-template-page-article .pm-listing--related-articles {
	margin-bottom: 0;
	margin-top: 48px;
}

.page-template-page-article .pm-listing--related-articles .pm-listing__heading {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
}

.page-template-page-article .pm-sources,
.page-template-page-pillar .pm-sources {
	border-top: 1px solid var(--wp--preset--color--hairline);
	margin-top: 48px;
	padding-top: 24px;
}

.page-template-page-article .pm-sources > *,
.page-template-page-pillar .pm-sources > * {
	margin-block-start: 0;
}

.page-template-page-article .pm-sources h2,
.page-template-page-pillar .pm-sources h2 {
	font-size: 1.294rem;
	line-height: 1.15;
	margin: 0 0 12px;
}

.page-template-page-article .pm-sources-list,
.page-template-page-pillar .pm-sources-list {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0;
	padding-left: 1.5em;
}

.page-template-page-article .pm-sources-list li,
.page-template-page-pillar .pm-sources-list li {
	margin-bottom: 16px;
	padding-left: 2px;
}

.page-template-page-article .pm-sources-list li::marker,
.page-template-page-pillar .pm-sources-list li::marker {
	color: var(--wp--preset--color--meta);
	font-weight: 600;
}

/* Pillar honesty, diagrams and callouts retain source-owned wrappers, so their
 * surfaces never have to be inferred from adjacent block order. */
.page-template-page-pillar .pm-honesty {
	background: var(--wp--preset--color--tint);
	border: 1px dashed var(--wp--preset--color--hairline);
	border-radius: 14px;
	margin: 24px 0;
	padding: 16px 24px;
}

.page-template-page-pillar .pm-honesty > * {
	margin-block: 0;
	margin-inline: 0 !important;
	max-width: none;
	width: auto;
}

.page-template-page-pillar .pm-diagram {
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-radius: 14px;
	margin-bottom: 32px;
	margin-top: 32px;
	padding: 24px 24px 16px;
}

.page-template-page-pillar .pm-diagram > * {
	margin-block-start: 0;
}

.page-template-page-pillar .pm-diagram-heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.294rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
}

.page-template-page-pillar .pm-populations-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-template-page-pillar .pm-callout {
	border-left: 3px solid var(--wp--preset--color--coral);
	padding-left: 16px;
}

.page-template-page-pillar .pm-callout:nth-child(2) {
	border-left-color: var(--wp--preset--color--sky);
}

.page-template-page-pillar .pm-callout > * {
	margin-block-start: 0;
}

.page-template-page-pillar .pm-callout-heading {
	align-items: center;
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.02rem;
	font-weight: 700;
	gap: 8px;
	line-height: 1.15;
	margin: 0 0 8px;
}

.page-template-page-pillar .pm-callout-heading .pm-art {
	flex: none;
	height: 26px;
	width: 26px;
}

.page-template-page-pillar .pm-callout ul {
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
	padding-left: 1.1em;
}

.page-template-page-pillar .pm-callout li {
	margin-bottom: 4px;
}

.page-template-page-pillar .pm-diagram .pm-figure-caption {
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--meta);
	font-size: 0.853rem;
	line-height: 1.55;
	margin: 16px 0 0;
	padding-top: 12px;
}

.page-template-page-pillar .pm-interpretation {
	background: var(--wp--preset--color--card);
	border: 1px solid #EAE3D3;
	border-left: 3px solid var(--wp--preset--color--sky);
	border-radius: 0 6px 6px 0;
	margin: 16px 0;
	padding: 16px 24px;
}

.page-template-page-pillar .pm-interpretation > * {
	margin-block-start: 0;
}

.page-template-page-pillar .pm-interpretation .pm-kicker {
	font-size: 0.765rem;
	letter-spacing: 0.08em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.page-template-page-pillar .pm-interpretation p:last-child {
	margin-bottom: 0;
}

.page-template-page-pillar .pm-practical {
	background: var(--wp--preset--color--tint);
	border-radius: 14px;
	margin: 32px 0;
	padding: 24px 32px;
}

.page-template-page-pillar .pm-practical > * {
	margin-block-start: 0;
}

.page-template-page-pillar .pm-practical h2 {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	line-height: 1.15;
	margin: 0 0 12px;
}

.page-template-page-pillar .pm-practical ul {
	margin: 12px 0 0;
	padding-left: 1.2em;
}

.page-template-page-article .pm-review-line,
.page-template-page-pillar .pm-review-line {
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--meta);
	font-size: 0.853rem;
	font-style: italic;
	margin-top: 32px;
	padding-top: 16px;
}

@media (max-width: 640px) {
	.page-template-page-pillar .pm-populations-grid {
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
	}

	.page-template-page-article .pm-listing--related-articles .rel-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------------- *
 * Remaining pages, batch 4: Support / Contact.
 * Source: F2 `.page-hero`, `.mech`, `.community`, `.grid3`, `.contact-card`
 * and `.contact-close`. All selectors are template-scoped.
 * ------------------------------------------------------------------------- */

.page-template-page-support .pm-main,
.page-template-page-contact .pm-main {
	padding-block: 0;
}

.page-template-page-support .pm-main > .wp-block-post-content,
.page-template-page-contact .pm-main > .wp-block-post-content {
	font-size: 17px;
	line-height: 1.6;
}

.page-template-page-support .wp-block-post-content > *,
.page-template-page-contact .wp-block-post-content > * {
	box-sizing: border-box;
	margin-inline-end: 0 !important;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2)) !important;
	max-width: calc(var(--wp--style--global--wide-size) - 40px);
	width: calc(100% - 40px);
}

.page-template-page-support .pm-page-hero,
.page-template-page-contact .pm-page-hero {
	overflow: hidden;
	padding-block: 48px 32px;
	position: relative;
}

.page-template-page-support .pm-page-hero::after,
.page-template-page-contact .pm-page-hero::after {
	border-radius: 48% 52% 65% 35% / 42% 38% 62% 58%;
	content: "";
	height: 126px;
	opacity: 0.3;
	pointer-events: none;
	position: absolute;
	right: -40px;
	top: -30px;
	width: 150px;
}

.page-template-page-support .pm-page-hero::after {
	background: var(--wp--preset--color--ochre);
}

.page-template-page-contact .pm-page-hero::after {
	background: var(--wp--preset--color--sky);
}

.page-template-page-support .pm-page-hero h1,
.page-template-page-contact .pm-page-hero h1 {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	font-weight: 800;
	line-height: 1.06;
	margin: 0 0 16px;
	max-width: 24ch;
	position: relative;
	z-index: 1;
}

.page-template-page-support .pm-page-lead,
.page-template-page-contact .pm-page-lead {
	font-size: 1.118rem;
	line-height: 1.6;
	margin: 0;
	max-width: 66ch;
	position: relative;
	z-index: 1;
}

.page-template-page-support .pm-page-hero .pm-measure {
	margin: 16px 0 0;
	max-width: 66ch;
}

.page-template-page-support .pm-page-hero .pm-trust-band {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	display: inline-block;
	font-size: 0.853rem;
	padding: 12px 16px;
}

.page-template-page-support .pm-section-heading,
.page-template-page-contact .pm-section-heading {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	margin: 48px 0 12px;
}

.page-template-page-support .wp-block-post-content > h3 {
	font-size: 1.294rem;
	line-height: 1.15;
}

.page-template-page-support .pm-support-mechanism {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	margin-bottom: 24px;
	overflow: hidden;
	padding: 24px 32px;
	position: relative;
}

.page-template-page-support .pm-support-mechanism--primary {
	border-left: 4px solid var(--wp--preset--color--ochre);
}

.page-template-page-support .pm-support-mechanism .pm-mech-head {
	margin: 0 0 12px;
}

.page-template-page-support .pm-support-mechanism .pm-mech-head h3 {
	font-size: 1.294rem;
	margin: 0;
}

.page-template-page-support .pm-support-mechanism > p {
	margin: 0 0 12px;
	max-width: 66ch;
}

.page-template-page-support .pm-support-mechanism > p:last-child {
	margin-bottom: 0;
}

.page-template-page-support .pm-costed {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
	margin: 12px 0;
	max-width: 66ch;
	padding: 8px 0 8px 16px;
}

.page-template-page-support .pm-costed .pm-costed-value {
	font-size: 17px;
}

.page-template-page-support .pm-support-community {
	background: var(--wp--preset--color--tint);
	margin-inline: 0 !important;
	max-width: none;
	padding-block: clamp(48px, 4vw + 24px, 96px);
	width: 100%;
}

.page-template-page-support .pm-support-community-inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: 20px;
	width: 100%;
}

.page-template-page-support .pm-support-community .pm-section-heading {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	margin-top: 0;
}

.page-template-page-support .pm-section-intro {
	color: var(--wp--preset--color--meta);
	margin: 0 0 32px;
	max-width: 66ch;
}

.page-template-page-support .pm-roles {
	list-style: none;
	margin: 0;
	max-width: 66ch;
	padding: 0;
}

.page-template-page-support .pm-roles li {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 12px 0;
}

.page-template-page-support .pm-roles li:last-child {
	border-bottom: 0;
}

.page-template-page-support .pm-roles strong {
	font-family: var(--wp--preset--font-family--display);
}

.page-template-page-support .pm-support-partners-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-template-page-support .pm-support-partner-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: var(--wp--custom--shadow--whisper);
	padding: 20px 24px;
}

.page-template-page-support .pm-support-partner-card h3 {
	font-size: 1.294rem;
	margin: 8px 0;
}

.page-template-page-support .pm-support-partner-card p {
	font-size: 0.912rem;
	line-height: 1.6;
	margin: 0;
}

.page-template-page-support .pm-support-notice {
	background: var(--wp--preset--color--tint);
	border: 1px dashed var(--wp--preset--color--hairline);
	border-radius: 14px;
	font-size: 0.853rem;
	margin-top: 32px;
	max-width: 66ch;
	padding: 16px 24px;
}

.page-template-page-support .pm-support-notice p {
	margin: 0;
}

.page-template-page-contact .pm-contact-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: var(--wp--custom--shadow--whisper);
	max-width: 66ch;
	padding: 32px;
}

.page-template-page-contact .pm-contact-card .pm-term {
	color: var(--wp--preset--color--meta);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.765rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.6;
	margin: 16px 0 0;
	text-transform: uppercase;
}

.page-template-page-contact .pm-contact-card .pm-term:first-child {
	margin-top: 0;
}

.page-template-page-contact .pm-contact-card .pm-term-detail {
	font-size: 17px;
	line-height: 1.6;
	margin: 2px 0 0;
}

.page-template-page-contact .pm-contact-close {
	margin-bottom: clamp(48px, 4vw + 24px, 96px);
	max-width: 520px;
}

.page-template-page-contact .pm-contact-close .pm-section-heading {
	margin-top: 48px;
}

.page-template-page-contact .pm-contact-close .pm-art--mode-large-illustration {
	height: auto;
	max-width: 100%;
	width: 100%;
}

.page-template-page-contact .pm-contact-close .pm-figure-caption {
	font-size: 0.765rem;
	line-height: 1.5;
	margin: 8px 0 0;
	max-width: 52ch;
}

@media (max-width: 900px) {
	.page-template-page-support .pm-support-partners-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.page-template-page-support .pm-support-mechanism {
		padding: 24px 32px;
	}

	.page-template-page-contact .pm-contact-card {
		padding: 32px;
	}

	.page-template-page-support .pm-support-partner-card {
		padding: 20px 24px;
	}

	.page-template-page-support .pm-support-notice {
		padding: 16px 24px;
	}
}

/* ------------------------------------------------------------------------- *
 * Remaining pages, batch 5: Policy / Policy index.
 * Exact pages port the F2 hero, spec banner, plain summary, skeleton and table.
 * The two owner-approved indexes reuse the family scale without new claims.
 * ------------------------------------------------------------------------- */

.page-template-page-policy .pm-main {
	padding-block: 0;
}

.page-template-page-policy .pm-main > .wp-block-post-content {
	font-size: 17px;
	line-height: 1.6;
	padding-bottom: clamp(48px, 4vw + 24px, 96px);
}

.page-template-page-policy .wp-block-post-content > * {
	box-sizing: border-box;
	margin-inline-end: 0 !important;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2)) !important;
	max-width: var(--wp--style--global--content-size);
	width: calc(100% - 40px);
}

.page-template-page-policy .pm-page-hero {
	max-width: calc(var(--wp--style--global--wide-size) - 40px);
	padding-block: 48px 32px;
}

.page-template-page-policy .pm-page-hero h1 {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	font-weight: 800;
	line-height: 1.06;
	margin: 0;
	max-width: 24ch;
}

.page-template-page-policy .pm-policy-spec-banner {
	border: 2px dashed var(--wp--preset--color--ochre);
	margin-bottom: 32px;
}

.page-template-page-policy .pm-policy-summary {
	margin-bottom: 32px;
}

.page-template-page-policy .pm-policy-summary > * {
	margin-inline: 0 !important;
	max-width: none;
	width: auto;
}

.page-template-page-policy .pm-section-heading {
	font-size: clamp(1.412rem, 1.1rem + 1.4vw, 1.882rem);
	margin: 0 0 12px;
}

.page-template-page-policy .pm-policy-skeleton {
	max-width: 66ch;
}

.page-template-page-policy .pm-cookie-register {
	max-width: 66ch;
	overflow-x: auto;
}

.page-template-page-policy .pm-meta-line {
	margin-top: 24px;
}

.page-template-page-policy-index .pm-main {
	padding-block: 0 clamp(48px, 4vw + 24px, 96px);
}

.page-template-page-policy-index .pm-page-title {
	font-size: clamp(1.647rem, 1.2rem + 2vw, 2.353rem);
	line-height: 1.06;
	margin: 48px 0 16px;
	margin-inline-end: 0 !important;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2)) !important;
	max-width: 24ch;
	width: calc(100% - 40px);
}

.page-template-page-policy-index .pm-main > .wp-block-post-content {
	font-size: 17px;
	line-height: 1.6;
}

.page-template-page-policy-index .wp-block-post-content > * {
	box-sizing: border-box;
	margin-inline-end: 0 !important;
	margin-inline-start: max(20px, calc((100% - var(--wp--style--global--wide-size) + 40px) / 2)) !important;
	max-width: 66ch;
	width: calc(100% - 40px);
}

.page-template-page-policy-index .pm-page-lead {
	font-size: 1.118rem;
	line-height: 1.6;
	margin-bottom: 24px;
	max-width: 66ch;
}

.page-template-page-policy-index .pm-route-link--cardlink {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: var(--wp--custom--shadow--whisper);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.118rem;
	margin-bottom: 16px;
	max-width: 66ch;
	padding: 20px 24px;
}

/* pm:art-consumers:begin — generated by importer/build-art-assets.js; do not edit by hand */
/* Decorative art consumers. The drawing is theme-owned in every case
   (COMPOSITION_CONTRACT.md §8.6): post_content carries only a structural hook naming
   the identity and the presentation mode, and the runtime listing surface is
   addressed by the ROW'S OWN IDENTITY — the pm_source_id of the page its heading
   links to — never by its position. The shelf order is authored, which is exactly
   why a positional consumer looked adequate: it was not. It made the drawing a
   property of the row number, so reordering the shelf would silently repaint it,
   and it let the Romanian and English shelves share one rule only because they
   happen to share one order.

   EVERY SIZE BELOW IS THE F2 RULE'S OWN VALUE, projected from
   strategy/design/f2-site/assets/site.css. F2 draws seven different things at seven
   different sizes; one shared box would not be a port of that design. */
.pm-art {
  margin: 0;
}

.pm-art::before,
.pm-listing__cover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- presentation modes, ported per context ---------------------------- */
/* population-icon — F2 `.pop-h svg` */
.pm-art--mode-population-icon {
  width: 26px;
  height: 26px;
  flex: none;
}
p:has(> .pm-art--mode-population-icon) {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* support-motif — F2 `.motif` */
.pm-art--mode-support-motif {
  width: 48px;
  height: 48px;
  flex: none;
}
.pm-mech-head {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40, 0.941rem);
}

/* pausemark — F2 `.hero-art svg.pausemark` */
.pm-art--mode-pausemark {
  position: absolute;
  width: 36px;
  height: 36px;
  left: 2px;
  bottom: 13%;
  transform: rotate(-8deg);
}

/* thumbnail — F2 `.thumb-svg` */
.pm-art--mode-thumbnail {
  display: block;
  width: 100%;
  height: 132px;
}
.pm-thumb {
  background: var(--wp--preset--color--tint);
  border-radius: var(--wp--custom--radius--chip, 6px);
  overflow: hidden;
}

/* card-cover — F2 `.cover-svg` */
.pm-art--mode-card-cover {
  display: block;
  width: 100%;
  height: auto;
}
.pm-thumb--pillar {
  background: var(--wp--preset--color--tint);
  border-radius: var(--wp--custom--radius--chip, 6px);
  overflow: hidden;
  display: block;
  flex: none;
}

/* shelf-cover — F2 `.event-row .cover` */
.pm-art--mode-shelf-cover {
  width: 64px;
}

/* large-illustration — F2 `.illus` */
.pm-art--mode-large-illustration {
  display: block;
  width: 100%;
  height: auto;
}

/* event-trio — F2 `.gallery svg` */
.pm-art--mode-event-trio {
  width: 100%;
  height: 170px;
}

/* hero collage — F2 `div.hero-art`, projected from site.css. The photograph is a
   theme asset: no external request, no WordPress attachment, no accessible name. */
.pm-hero-art {
  position: relative;
  min-height: 380px;
}
.pm-hero-photo {
  position: absolute;
  inset: 8% 4% 6% 10%;
  border-radius: var(--wp--custom--radius--blob-3);
  overflow: hidden;
  box-shadow: var(--wp--preset--shadow--raised);
  transform: rotate(-1.2deg);
}
.pm-hero-photo::before {
  content: "";
  display: block;
  width: 260%;
  height: 260%;
  background-size: cover;
  background-position: 10% 3%;
  background-repeat: no-repeat;
  filter: saturate(0.96) sepia(0.06);
}
.pm-hero-blob {
  position: absolute;
  pointer-events: none;
}
.pm-hero-blob--h1b {
  width: 150px;
  height: 126px;
  left: -28px;
  top: -6px;
  background: var(--wp--preset--color--brand-blue);
  border-radius: var(--wp--custom--radius--blob-1);
  opacity: 0.9;
  transform: rotate(8deg);
}
.pm-hero-blob--h2b {
  width: 120px;
  height: 104px;
  right: -16px;
  bottom: 2%;
  background: var(--wp--preset--color--communication-yellow);
  border-radius: var(--wp--custom--radius--blob-2);
  opacity: 0.85;
}
.pm-hero-blob--h3b {
  width: 92px;
  height: 88px;
  right: 12%;
  top: -18px;
  background: var(--wp--preset--color--brand-red);
  border-radius: var(--wp--custom--radius--blob-3);
  opacity: 0.8;
}

@media (max-width:840px) {
  .pm-hero-art {
    min-height: 170px;
  }
  .pm-hero-photo {
    inset: 4% 2% 4% 4%;
  }
}

/* NOT PORTED: .hero-art{order} @max-width:840px — F2 reorders the art inside `.hero`, a two-column grid. The WordPress hero band places `pm-hero-art` in normal flow after the descriptor, so there is no grid or flex parent for `order` to act in and porting it would be inert. */

/* One consumer for the hero photograph, painted from the theme copy. */
.pm-hero-photo--hero-cover-01::before { background-image: url("assets/photo/hero-cover-01.jpg"); }

@media (max-width:840px) {
  .pm-art--mode-pausemark {
    display: none;
  }
}

@media (max-width:600px) {
  .pm-art--mode-shelf-cover {
    width: 48px;
  }
}

/* The generated reference-shelf surface carries the WHOLE F2 `.cover` rule — the
   same projection the pillar card gets — plus F2's own cover width and the
   viewBox aspect that the inline <svg> used to supply. `.pm-listing__row` is a
   flex row, so `display: block` and `flex: none` are what keep this surface from
   being squeezed away. */
.pm-listing__row .pm-listing__cover {
  background: var(--wp--preset--color--tint);
  border-radius: var(--wp--custom--radius--chip, 6px);
  overflow: hidden;
  display: block;
  flex: none;
  width: 64px;
  aspect-ratio: 96 / 72;
}
@media (max-width:600px) {
  .pm-listing__row .pm-listing__cover {
    width: 48px;
  }
}

/* One consumer per art identity placed by post_content. */
.pm-art--cover-svg-01::before { background-image: url("assets/art/cover-svg-01.svg?v=1ec1371a5a2596e28e71aafde8fef99a76c4a2fecaf2dd49a22f5e418374871e"); }
.pm-art--cover-svg-02::before { background-image: url("assets/art/cover-svg-02.svg?v=395aaa5e423fe016842596cbf853167d4c82105ba2216eee63b9c32dc68217a0"); }
.pm-art--illus-chair-01::before { background-image: url("assets/art/illus-chair-01.svg?v=88ad47800bb72902a4aab0034a1e281ae29402f6479c2b2d93d42701549e982f"); }
.pm-art--illus-chair-02::before { background-image: url("assets/art/illus-chair-02.svg?v=4df3f9aa86b6a3dcb6693c93b696d53bc19f8363d9cb0f6e767503580522ef09"); }
.pm-art--illus-prog-01::before { background-image: url("assets/art/illus-prog-01.svg?v=0a90df19509eff2f9b4798bc48a395b40d746ab04e988774a983cba144d95ed3"); }
.pm-art--illus-prog-02::before { background-image: url("assets/art/illus-prog-02.svg?v=84b5ee453aa5771cee8711615add2c80b77a167425e7fa297a2d83ef70a16314"); }
.pm-art--illus-prog-03::before { background-image: url("assets/art/illus-prog-03.svg?v=d8b51ff75d29d84a37a0057519117cd0faee6ede2c47f45d5368c4bf16f3534d"); }
.pm-art--illus-scene-01::before { background-image: url("assets/art/illus-scene-01.svg?v=c69486c2b3f4f459b9a1d232878f63f71c6f32a02f7b35b61567964896fbd79c"); }
.pm-art--illus-scene-02::before { background-image: url("assets/art/illus-scene-02.svg?v=c6345d1c7ea75798ab9bd4b0b5817d3c138cdbd400f103641f730acbfae9b222"); }
.pm-art--illus-scene-03::before { background-image: url("assets/art/illus-scene-03.svg?v=3ff41cc4af8318980d22df36833140681bfe8899ee343941b04a7769b894be39"); }
.pm-art--motif-01::before { background-image: url("assets/art/motif-01.svg?v=bbb58d88e00b418a1431f64d974fd1b3f61232248a9f3243701b47b5016211e6"); }
.pm-art--motif-02::before { background-image: url("assets/art/motif-02.svg?v=a33fff1c0b5a2753188461601f5dc25b0bf90cbfe26dda97b4f1d53ac06394d3"); }
.pm-art--motif-03::before { background-image: url("assets/art/motif-03.svg?v=d29ac4485ebc19efb8cebee5df4b1fc2978db9629cbaa6c3ca44b6eb2e6212fe"); }
.pm-art--motif-04::before { background-image: url("assets/art/motif-04.svg?v=e0b3461b0c817445f2e6eac31f621a59a02f826019fb247f6ea908a4b0ce6278"); }
.pm-art--motif-05::before { background-image: url("assets/art/motif-05.svg?v=088cdf232593c39c5ee2dc21188b703267af7c503d8fc52a1d86c78be3c17519"); }
.pm-art--motif-06::before { background-image: url("assets/art/motif-06.svg?v=077400e7909547f152930b65ab4e540e7fe92627b029127eb622a23e4c7342f3"); }
.pm-art--motif-07::before { background-image: url("assets/art/motif-07.svg?v=95b40c87c560eed034a141f09001596f1c18439dde739a1f8bdab24ecf1f2acf"); }
.pm-art--motif-08::before { background-image: url("assets/art/motif-08.svg?v=c5c52cb19c4fae4225b6a6d5b37c9e0982732a233ac9eab220189f41daa4fbb9"); }
.pm-art--motif-plain-01::before { background-image: url("assets/art/motif-plain-01.svg?v=6ba8a5ecf608e00a8597eed731597bc9c508f25ed6403a784fb7fdfb28aec843"); }
.pm-art--motif-plain-02::before { background-image: url("assets/art/motif-plain-02.svg?v=ef99e84763bb7f30ee7aeddf440d12a8958eb031fcdeb742fbd6d2e5d53939e3"); }
.pm-art--pausemark-01::before { background-image: url("assets/art/pausemark-01.svg?v=0dd89fcc53f14011fc49d570e7412dc951e87f2cb134571f2ba20fa249c196c4"); }
.pm-art--thumb-svg-01::before { background-image: url("assets/art/thumb-svg-01.svg?v=fbe65ca8708a43e559cf0f89ececb6ca6c306789a3e5a5d70e0ef464a4bc9fdc"); }
.pm-art--thumb-svg-02::before { background-image: url("assets/art/thumb-svg-02.svg?v=dfdbdc921dde0a4db098327775dff1119830aab8fb19c8b3167373892c468533"); }

/* Intrinsic aspect, from each drawing's own viewBox — never an assumed ratio. */
.pm-art--mode-card-cover { aspect-ratio: 96 / 72; } /* all 2 instance(s) share this viewBox */
.pm-art--mode-large-illustration.pm-art--illus-chair-01 { aspect-ratio: 340 / 200; }
.pm-art--mode-large-illustration.pm-art--illus-chair-02 { aspect-ratio: 340 / 200; }
.pm-art--mode-large-illustration.pm-art--illus-prog-02 { aspect-ratio: 340 / 220; }
.pm-art--mode-large-illustration.pm-art--illus-prog-03 { aspect-ratio: 340 / 220; }
.pm-art--mode-large-illustration.pm-art--illus-scene-01 { aspect-ratio: 360 / 280; }
.pm-art--mode-large-illustration.pm-art--illus-scene-02 { aspect-ratio: 360 / 280; }
.pm-art--mode-large-illustration.pm-art--illus-scene-03 { aspect-ratio: 360 / 280; }

/* One consumer per reference-shelf IDENTITY — the page the row is about. */
.pm-listing__row--pm-articol .pm-listing__cover::before { background-image: url("assets/art/cover-svg-01.svg?v=1ec1371a5a2596e28e71aafde8fef99a76c4a2fecaf2dd49a22f5e418374871e"); } /* pm_articol: pm_en_resources, pm_resurse */
.pm-listing__row--pm-en-infra .pm-listing__cover::before { background-image: url("assets/art/cover-svg-03.svg?v=d1d5373aba3be3025f7f7aa17fb0e76184e12cace07e2f13c28d46c3336b28e5"); } /* pm_en_infra: pm_en_resources */
.pm-listing__row--pm-en-pillar .pm-listing__cover::before { background-image: url("assets/art/cover-svg-02.svg?v=395aaa5e423fe016842596cbf853167d4c82105ba2216eee63b9c32dc68217a0"); } /* pm_en_pillar: pm_en_resources */
.pm-listing__row--pm-infra .pm-listing__cover::before { background-image: url("assets/art/cover-svg-03.svg?v=d1d5373aba3be3025f7f7aa17fb0e76184e12cace07e2f13c28d46c3336b28e5"); } /* pm_infra: pm_resurse */
.pm-listing__row--pm-pilon .pm-listing__cover::before { background-image: url("assets/art/cover-svg-02.svg?v=395aaa5e423fe016842596cbf853167d4c82105ba2216eee63b9c32dc68217a0"); } /* pm_pilon: pm_resurse */
/* pm:art-consumers:end */