/*
Theme Name: Liberty Archive Collective
Theme URI: https://libertyarchivecollective.com
Author: RemoteMountain
Author URI: https://remotemountain.com
Description: Native Gutenberg block theme for Liberty Archive Collective. Framer→WordPress parity rebuild. Design tokens (type, color, spacing) live in theme.json; custom post types, the Series taxonomy, and 301 redirects live in mu-plugins so they survive a theme switch. The interaction layer (scroll reveal, hero load-in, cursor trail) is re-done natively in assets/js/interactions.js — no page builder, no plugin sprawl.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.5.14
License: Proprietary — RemoteMountain / Liberty Archive Collective
Text Domain: liberty-archive
*/

/*
  Block theme: styling is driven by theme.json wherever theme.json can express it.
  This stylesheet carries the parts it can't: brand image assets (logo/lockup/
  portrait), the RM-3969 measured-parity geometry (page insets, hero, grid,
  founder composition, CTA/footer), and the native interaction layer.
  Enqueued front-end only from functions.php.

  RM-3969 calibration is the source for every number here — captured 1440/810/390.
  Breakpoint seam: 811px (tablet numbers apply ≤810, matching the capture widths).
*/

/* ---------------------------------------------------------------------------
   Page inset — reference is 48px at 1440, 20px at 810 and 390 (RM-3969 §3/§4/§6).
   theme.json sets 48px; this collapses it below the tablet seam. Declared on
   body (not :root) so it wins over the :root vars in WP's global-styles sheet
   regardless of load order.
--------------------------------------------------------------------------- */
@media (max-width: 810px) {
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Nav — UM logo mark. Reference: 63×51.9 at x20/y6, header shell 64px tall
   (RM-3969 §1). Background image so the asset stays theme-owned and the path
   is relative to this stylesheet — survives the real-domain cutover.
--------------------------------------------------------------------------- */
@media (min-width: 811px) {
	.lac-header > .alignwide {
		max-width: none;
		/* !important: beats the constrained-layout auto-centering margins */
		margin-left: -28px !important;
		margin-right: -28px !important;
	}
}

.lac-logo {
	display: inline-block;
	width: 63px;
	height: 52px;
	background: url(assets/img/um-mark.png) no-repeat left center;
	background-size: contain;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Hero — RM-3969 v0.5.1 measured geometry (Jiwoo's 8/12 recapture, live DOM
   verified). The live hero headline is OSWALD 76/91.2 wt700 inside a scaling
   SVG (viewBox 925×91) — the stretched-letterform treatment; the RM-3971
   "Switzer display" row was a mis-attributed probe of the section headline.
   Fixed rhythm (not 100vh): lockup y227 · headline y495.2 · mission y977 @1440;
   y227/457/852.7 @810; y185/412.6/772 @390. Mobile headline is the same
   scaled-SVG treatment, two lines, left-aligned (v0.5.6 — corrected read;
   see .lac-hero__wordmark-svg-m below).
--------------------------------------------------------------------------- */
.lac-hero {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* RM-3969: hero content sat 22px high (lockup y205 vs live y227 at 1440 and
	   810). +22 lands the lockup at the live rest position on both breakpoints. */
	padding: 138px 0 0;
	/* v0.5.7 — RM-3969 v0.5.6 recapture (Jiwoo, NEAR-PASS): the 413px lockup box
	   overflows a 390 viewport by 11.5px each side (x-11.5..401.5), pushing the
	   document to 402px. Live keeps the same 413 box and clips it at the hero.
	   Clip horizontal overflow here; the visible mark (~211px, centered) is
	   untouched, geometry preserved, and overflow-y stays visible. */
	overflow-x: clip;
}

.lac-hero__lockup {
	/* Live: 413×154 box, object-fit contain (mark letterboxes to ~211×154). */
	width: 413px;
	height: 154px;
	max-width: none;
	background: url(assets/img/um-lockup.png) no-repeat center;
	background-size: contain;
}

.lac-hero__wordmark {
	display: block;
	width: 993px;
	max-width: calc(100vw - 60px);
	margin: 114px auto 0;
}

.lac-hero__wordmark-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.lac-hero__wordmark-line {
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 76px;
	line-height: 91.2px;
	letter-spacing: normal;
	color: #ffffff;
	white-space: nowrap;
	text-align: center;
	margin: 0;
}

.lac-hero__wordmark-plain {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* v0.5.6 — mobile wordmark is the SAME scaled-SVG treatment as desktop on live
   (330×106.8 at x30, two lines), not plain text; the v0.5.1-era "plain text"
   read is corrected. viewBox width 543.55 = "LIBERTY ARCHIVE" at Oswald 700
   76px; height 175.92 = 106.8 × 543.55/330, so the box lands exactly 330×106.8
   at the 390 capture width. Hidden above the mobile seam. */
.lac-hero__wordmark-svg-m {
	display: none;
}

.lac-hero__wordmark-line--m {
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 76px;
	line-height: 87.96px;
	letter-spacing: normal;
	color: #ffffff;
	white-space: normal;
	text-align: left;
	margin: 0;
}

.lac-hero__mission {
	max-width: 540px;
	/* v0.5.6 — RM-3969 v0.5.5 recapture: desktop mission rested 49.3 low (977 vs
	   live 927.4). 384 - 49.3 = 334.7; measured back at 927.4 on the served DOM. */
	margin: 334.7px auto 0;
	text-transform: uppercase;
	letter-spacing: -0.16px;
	font-size: 16px;
	line-height: 25.6px;
	font-weight: 400;
	color: var(--wp--preset--color--white);
}

@media (max-width: 810px) {
	.lac-hero__wordmark {
		margin-top: 76px;
	}

	.lac-hero__mission {
		margin-top: 321px;
		/* v0.5.6 — live tablet/mobile mission is 15px type on a 24px line (boxes
		   540×72 / 330×96); staging's 16/25.6 rendered taller boxes. */
		font-size: 15px;
		line-height: 24px;
	}
}

@media (max-width: 500px) {
	.lac-hero {
		padding-top: 96px;
	}

	/* v0.5.6 — live mobile wordmark box is 330×106.8 at x=30 (RM-3969 v0.5.5
	   recapture); was 350×72 at x=20. The desktop single-line SVG swaps for the
	   two-line mobile SVG; the plain span keeps its sr-only clip so the h1
	   retains an accessible name (both SVGs are aria-hidden). */
	.lac-hero__wordmark {
		width: calc(100% - 60px);
		max-width: none;
		margin-top: 73.6px;
	}

	.lac-hero__wordmark-svg {
		display: none;
	}

	.lac-hero__wordmark-svg-m {
		display: block;
		width: 100%;
		height: auto;
		overflow: visible;
	}

	.lac-hero__mission {
		max-width: 330px;
		/* v0.5.6 — 287 − 34.8 (taller wordmark box) + 0.4 (wordmark rest shift)
		   keeps the mission rest at live's y772. */
		margin-top: 252.6px;
	}
}

/* Section-start rhythm — v0.5.6, RM-3969 v0.5.5 recapture: the heading started
   ~62px early at every width AND the desktop mission raise (−49.3) pulls the
   whole band up with it, so the upstream correction is 96+62.5+49.3 = 207.8
   @1440, 121+62.4+4.8 = 188.2 @810, 120+61.6+6.4 = 188 @390 (the tablet/mobile
   +4.8/+6.4 offset the shorter 15px mission boxes). Heading lands at live's
   y1264 / y1164 / y1108 on the served DOM. */
.lac-initiatives-band {
	padding-top: 207.8px !important;
}

/* v0.5.6 — with the band start corrected at the source, most of v0.5.5's
   129.5px below-cards compensation comes back out: See Them All rests at live's
   y3390.6 / y4269.4 / y2857.3. */
.lac-initiatives-band .wp-block-buttons {
	margin-top: 48.4px !important;
}

/* Live renders the button uppercase (SEE THEM ALL); the block content is
   lowercase on both sides — presentation parity, not a content change. */
.lac-initiatives-band .wp-block-button__link {
	text-transform: uppercase;
}

@media (max-width: 810px) {
	.lac-initiatives-band {
		padding-top: 188.2px !important;
	}

	.lac-initiatives-band .wp-block-buttons {
		margin-top: 2.7px !important;
	}

	/* v0.5.6 — founder media rested 28.1 low; 44 − 10.1 after the upstream
	   initiatives/button corrections shift the band. */
	.lac-reveal.lac-reveal:has(.lac-founder) {
		padding-top: 33.9px !important;
	}

	/* v0.5.6 — re-anchored after the founder text-rhythm corrections below;
	   CTA rests at live's y6146.2, footer y6630.2. */
	.lac-reveal.lac-reveal:has(.lac-cta-headline) {
		padding-top: 85.3px !important;
		padding-bottom: 219.6px !important;
	}
}

@media (max-width: 500px) {
	.lac-initiatives-band {
		padding-top: 188px !important;
	}

	.lac-initiatives-band .wp-block-buttons {
		margin-top: -10.9px !important;
	}

	/* v0.5.6 — mobile founder band keeps its own value: the ≤810 reduction to
	   33.9 belongs to the tablet flow only; media rests at live's y3003.2. */
	.lac-reveal.lac-reveal:has(.lac-founder) {
		padding-top: 44.1px !important;
	}
}

/* ---------------------------------------------------------------------------
   Section headlines — reference "Our Initiatives" / "Get In Touch": 80/72
   wt 500 -2.4px, LEFT-aligned at the page inset, full measure (RM-3969 §3/§6).
   40/36 at 810 and 390; CTA drops to 50/45 -1.5px at 390.
--------------------------------------------------------------------------- */
.lac-section-headline.wp-block-heading,
.lac-cta-headline.wp-block-heading {
	/* !important: WP preset .has-*-font-size classes are !important; these are the
	   RM-3969 exact values and must win over the fluid clamp. */
	font-size: 80px !important;
	line-height: 72px;
	font-weight: 500;
	letter-spacing: -2.4px;
	text-align: left;
}

@media (max-width: 810px) {
	.lac-section-headline.wp-block-heading {
		font-size: 40px !important;
		line-height: 36px;
		letter-spacing: -1.2px;
	}
	/* CTA stays 80/72 at 810 — Jiwoo's explicit role ruling (8/12). */
}

@media (max-width: 500px) {
	.lac-cta-headline.wp-block-heading {
		font-size: 50px !important;
		line-height: 45px;
		letter-spacing: -1.5px;
	}
}

/* ---------------------------------------------------------------------------
   Initiatives grid — RM-3969 §3 (the 2,055px / 3,651px structural fix):
   2 × 648px columns, 48px gap at 1440 · 1 × 770px at 810 · 1 × 350px at 390.
   The alignwide container is 1344 (= 2×648 + 48) so the exact widths fall out
   of the grid at the capture viewport; below it the columns stay fluid-equal.
--------------------------------------------------------------------------- */
.lac-initiatives .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 48px;
}

/* Live card pitch is ~625px (RM-3969 anchors: first images y1394 → See Them All
   y3380.7); the delta over the media+type stack rides the card's foot. */
.lac-card {
	padding-bottom: 100px !important;
}

@media (max-width: 810px) {
	.lac-initiatives .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* Card typography — titles Switzer 28/28 wt 500 -0.84px; descriptors are the
   short exact reference lines at 12/14.4 uppercase +0.36px (RM-3969 §3). */
.lac-card__title,
.lac-card__title a {
	font-size: 28px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: -0.84px;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.lac-card__descriptor {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 14.4px;
	letter-spacing: 0.36px;
	text-transform: uppercase;
	margin-top: var(--wp--preset--spacing--20);
}

@media (max-width: 810px) {
	.lac-card__title,
	.lac-card__title a {
		font-size: 20px !important;
		line-height: 20px !important;
		letter-spacing: -0.6px;
	}

	/* Live tablet card (measured on the reference at 810): full-bleed media at
	   natural per-image ratios (515.1 / 508.8 / 433.1), type stack 20-20-14-14.4,
	   48px row gap, no card foot. The constrained card layout caps children at
	   the 648 content size — release it so media fills the 770 card. */
	.lac-card {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.lac-card > * {
		max-width: none !important;
	}

	/* Reference-specific media ratios at ≤810 (RM-3969: live renders each
	   artwork at its own ratio — 515.1 / 508.8 / 433.1 on 770). Pinned per
	   slot instead of height:auto because WP's sizes=auto lazy images carry
	   contain-intrinsic-size until load. Snapshot of the current five-item
	   set; revisit if the initiative set ever changes. */
	.lac-initiatives .wp-block-post-template > li:nth-child(-n+3) .wp-block-post-featured-image {
		aspect-ratio: 2116 / 1416 !important;
	}

	.lac-initiatives .wp-block-post-template > li:nth-child(4) .wp-block-post-featured-image {
		aspect-ratio: 1144 / 756 !important;
	}

	.lac-initiatives .wp-block-post-template > li:nth-child(5) .wp-block-post-featured-image {
		aspect-ratio: 1920 / 1080 !important;
	}

	.lac-card .wp-block-post-title {
		margin-top: 20px !important;
	}

	.lac-card .wp-block-post-excerpt {
		margin-top: 14px !important;
	}
}

/* Archive card titles keep the same role. Long single-word brand titles
   (UnredactedMedia, J6PatriotNews, PardonUsFilms…) carry no natural break
   opportunity; with the grid item's default min-width:auto they reserve the
   whole word's width and bleed toward the neighbouring column (RM-3978). Let
   the item honour its minmax(0,1fr) track, and break the word only if it still
   overflows — every title stays inside its own card with a clear gutter to the
   next, at desktop, tablet and mobile. */
.wp-block-query .wp-block-post-template > li {
	min-width: 0;
}

.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-title a {
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: none;
}

/* ---------------------------------------------------------------------------
   Founder — RM-3969 §4: text column 520px (heading 63/63 wt 500 -1.89px, bio
   at the 520 measure), portrait 649×786.6 to the right. ≤810 the section
   stacks single-column with the portrait ABOVE the heading (reference mobile
   sequencing: portrait y3003 → heading y3490).
--------------------------------------------------------------------------- */
.lac-founder {
	align-items: flex-start;
}

/* Founder band + in-column offsets — v0.5.6, RM-3969 v0.5.5 selector-corrected
   identities: live's founder text is ONE H3 ("HELLO THERE" + "I'M DAVID
   SUMRALL" on 63px lines) starting 105.1 below the media top. Staging maps
   eyebrow p ↔ H3 line 1 (padding-top below) and headline ↔ H3 line 2 (the
   24px eyebrow box + 39px margin = the 63px line pitch). Media rests at live's
   y3609.9, text start y3715.0, headline y3778.0. */
.lac-reveal:has(.lac-founder) {
	padding-top: 117.5px !important;
}

.lac-founder__headline.wp-block-heading {
	margin-top: 39px;
}

.lac-founder__text {
	flex: 0 1 520px;
	padding-top: 105.1px;
}

.lac-founder__headline.wp-block-heading {
	font-size: 63px !important;
	line-height: 63px;
	font-weight: 500;
	letter-spacing: -1.89px;
}

.lac-founder__portrait {
	flex: 0 1 649px;
	aspect-ratio: 649 / 786.6;
	background: url(assets/img/founder-portrait.jpg) no-repeat center;
	background-size: cover;
}

@media (max-width: 810px) {
	.lac-founder {
		flex-direction: column-reverse;
	}

	.lac-founder__text,
	.lac-founder__portrait {
		flex-basis: auto;
		width: 100%;
	}

	/* RM-3969: .lac-founder__text is a constrained sub-layout, so its bio/headline
	   capped at contentSize (648) and centred -> 648/x81. Live runs the founder
	   copy full-column. Release the cap so it fills the 770 column at x20. */
	.lac-founder__text > * {
		max-width: none !important;
	}

	/* v0.5.6 — stacked flow: text started 11.4 high of live relative to the
	   media (21.6 at 390, overridden below). padding-top, not margin — WP's
	   flex layout zeroes child margins. Headline pitch follows live's 40px
	   line: 24px eyebrow box + 16px = 40. */
	.lac-founder__text {
		padding-top: 11.5px;
	}

	.lac-founder__headline.wp-block-heading {
		margin-top: 16px;
	}

	.lac-founder__portrait {
		aspect-ratio: 649 / 786.6;
		width: calc(100% + 30.8px);
		margin-left: -15.4px !important;
		margin-right: -15.4px !important;
	}

	.lac-founder__headline.wp-block-heading {
		font-size: 40px !important;
		line-height: 40px;
		letter-spacing: -1.2px;
	}
}

/* ---------------------------------------------------------------------------
   Editorial link lists (Iniatives / Films index) — RM-3969 §5: two columns
   from the left inset (x48 / x340.8 → 292.8px rhythm), labels and links
   16/25.6 uppercase. Flush-left, no bullets.
--------------------------------------------------------------------------- */
.lac-indexes {
	gap: 0;
}

.lac-index-col {
	flex: 0 0 292.8px;
}

.lac-linklist {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25.6px;
	text-transform: uppercase;
}

.lac-linklist li + li {
	margin-top: 0.35em;
}

@media (max-width: 500px) {
	.lac-index-col {
		flex: 0 0 50%;
	}

	.lac-founder__portrait {
		width: calc(100% + 14px);
		margin-left: -7px !important;
		margin-right: -7px !important;
	}

	/* v0.5.6 — same 40px live line pitch as tablet; text sits 21.6 lower
	   relative to the media at 390. */
	.lac-founder__headline.wp-block-heading {
		margin-top: 16px !important;
	}

	.lac-founder__text {
		padding-top: 21.6px;
	}

	.lac-reveal.lac-reveal:has(.lac-indexes) {
		padding-top: 14px !important;
	}

	/* v0.5.6 — mobile CTA rested 51.8 low; rests at live's y4473, footer y4930. */
	.lac-reveal.lac-reveal:has(.lac-cta-headline) {
		padding-top: 177.8px !important;
		padding-bottom: 221.2px !important;
	}
}

/* CTA band — v0.5.6: CTA rides the founder media fix and rests at live's
   y4754.3 @1440; padding-bottom re-anchors the footer to live's y5274.3. */
.lac-reveal:has(.lac-cta-headline) {
	padding-top: 48px !important;
	padding-bottom: 231.6px !important;
}

/* ---------------------------------------------------------------------------
   Links. theme.json sets the global link role to white with no underline so
   structural links read as the design's clean white. Inline links inside
   running prose keep an underline (WCAG 1.4.1 affordance on dark ground).
--------------------------------------------------------------------------- */
main p a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: from-font;
}

/* ---------------------------------------------------------------------------
   Footer — RM-3969 §7: statement 28/28 on the right, exact reference year
   string, email-only contact (RM-3967 sanctioned deviation).
--------------------------------------------------------------------------- */
.lac-footer {
	padding-top: 88px !important;
	/* v0.5.6 — RM-3969 v0.5.5 doc-height residuals (+54/+25/+76) were partly a
	   real footer-tail difference: live runs ~12px below the copyright at 1440
	   and ~3px at 810/390, on an 18px copyright line. Closes the document
	   heights to live's 5304 / 6652 / 4952. */
	padding-bottom: 12.2px !important;
}

.lac-footer p.has-small-font-size.has-surface-color {
	line-height: 18px;
}

@media (max-width: 810px) {
	.lac-footer {
		padding-top: 66px !important;
		padding-bottom: 3.3px !important;
	}
}

.lac-footer-statement {
	font-family: var(--wp--preset--font-family--body);
	font-size: 28px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: -0.84px;
	text-align: right;
}

@media (max-width: 810px) {
	.lac-footer-statement {
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
   Projects dropdown — the block-nav submenu on a dark ground.
--------------------------------------------------------------------------- */
/* Higher specificity than core's `.wp-block-navigation .has-child
   .wp-block-navigation__submenu-container { background-color: inherit }`
   (0,3,0) — the header scope + .has-child takes us to (0,4,0) so the dark
   ground actually lands. Hex, not the preset var, so nothing can drop it. */
.lac-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	background-color: #0f0e0e;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	padding: 8px 0;
	min-width: 232px;
	overflow: hidden;
}

.lac-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #ffffff;
	padding: 0.42rem 1.1rem;
}

.lac-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.lac-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--gold);
}

/* ---------------------------------------------------------------------------
   Mobile nav overlay — RM-3969 fidelity #1 (launch blocker). The nav block now
   carries overlayBackgroundColor:ink / overlayTextColor:white (parts/header),
   so the open overlay renders dark with white labels — live's treatment — and
   the 10 project sub-links read white-on-black instead of the invisible
   white-on-white the default overlay shipped. These rules finish the parity:
   inside the open overlay the desktop dropdown's bordered dark panel goes flat
   (it's already on a dark ground), the projects list gets live's divider rules,
   and the submenu sits open in the flow rather than as a floating card.
--------------------------------------------------------------------------- */
.lac-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0f0e0e;
}

.lac-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.lac-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #ffffff;
}

/* Flatten the desktop dropdown card while the overlay is open: it's the whole
   submenu on a dark ground now, not a floating panel. */
.lac-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	min-width: 0;
}

/* Live's project sub-links carry divider rules; padded rows, hairline between. */
.lac-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.lac-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0;
}

.lac-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.lac-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--gold);
}

/* ---------------------------------------------------------------------------
   Meet The Team — RM-3969 fidelity #2. Live: left-aligned title, a single 3-up
   row, each member on a lighter card panel with a centered name + role. Staging
   shipped a centered title and a 16rem-min grid that wrapped to 2-up (Tamara
   dropped to row 2). Force the 3-up row and give each member the card panel.
--------------------------------------------------------------------------- */
.lac-team .wp-block-post-title {
	text-align: left;
}

.lac-team .wp-block-group.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lac-team-card {
	background-color: var(--wp--preset--color--black);
	text-align: center;
}

.lac-team-card .wp-block-image {
	margin: 0;
}

.lac-team-card .wp-block-heading,
.lac-team-card p {
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

.lac-team-card > .wp-block-heading:last-child,
.lac-team-card > p:last-child {
	padding-bottom: var(--wp--preset--spacing--40);
}

@media (max-width: 810px) {
	.lac-team .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 500px) {
	.lac-team .wp-block-group.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Membership / Shop placeholder — RM-3969 fidelity #3. Live is a large centered
   COMING SOON… statement + a centered subhead, not the small stacked page-title
   staging shipped.
--------------------------------------------------------------------------- */
.lac-comingsoon {
	min-height: 52vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.lac-comingsoon__title.wp-block-heading {
	font-size: 80px !important;
	line-height: 0.96;
	font-weight: 500;
	letter-spacing: -2.4px;
	text-align: center;
}

.lac-comingsoon__subhead {
	color: var(--wp--preset--color--white);
	opacity: 0.72;
}

@media (max-width: 810px) {
	.lac-comingsoon__title.wp-block-heading {
		font-size: 48px !important;
		letter-spacing: -1.4px;
	}
}

/* ---------------------------------------------------------------------------
   Project detail — RM-3969 fidelity #4. Live: full-width left title, featured
   image as a full-bleed hero, and the MISSION/ESTABLISHED/URL/EMAIL facts in a
   3-column all-caps grid (intro | URL·EMAIL | ESTABLISHED·MISSION) — not the
   narrow centered column with stacked metadata staging shipped. The grid markup
   is assembled by the the_content transform in functions.php; this styles it.
--------------------------------------------------------------------------- */
.lac-project__title.wp-block-post-title {
	text-align: left;
	max-width: none;
}

.lac-project__hero img {
	width: 100%;
	height: auto;
	display: block;
}

.lac-project-meta {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.lac-project-meta__intro p {
	margin-top: 0;
}

.lac-project-meta__col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.lac-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.lac-meta-item__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 14.4px;
	letter-spacing: 0.36px;
	text-transform: uppercase;
	color: var(--wp--preset--color--surface);
	opacity: 0.6;
}

.lac-meta-item__value {
	font-size: 15px;
	line-height: 1.5;
}

.lac-meta-item__value a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Body galleries follow the meta grid — give them room and a sane single measure. */
.lac-project-meta + .wp-block-image,
.lac-project__body .wp-block-image {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 760px;
}

@media (max-width: 810px) {
	.lac-project-meta {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

/* ---------------------------------------------------------------------------
   Content/Posts related grid — RM-3975 (launch blocker). Rendered by the
   liberty/related-content dynamic block on project singles that have relations;
   absent entirely on the four no-relation projects. Card = related content
   item's own featured image (WP media, no framerusercontent) + title, linking
   to the content single, in live's DOM order.
--------------------------------------------------------------------------- */
.lac-related {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.lac-related__label {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.lac-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
}

.lac-related__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.lac-related__frame {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--wp--preset--color--black);
}

.lac-related__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lac-related__title {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	line-height: 22px;
	font-weight: 500;
	letter-spacing: -0.6px;
}

.lac-related__link:hover .lac-related__title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 810px) {
	.lac-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}
}

@media (max-width: 500px) {
	.lac-related__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   INTERACTION LAYER — native re-do of the Framer motion. Progressive enhancement:
   interactions.js adds the .lac-js hook and arms the hidden states, so with JS
   off the page renders fully visible (no blank sections, no black hero).
--------------------------------------------------------------------------- */

/* Scroll reveal — sections rise + fade in when they enter the viewport. */
.lac-js .lac-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}

.lac-js .lac-reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* Hero load-in — CSS-driven so it plays reliably on load and ALWAYS ends at
   the visible resting state. */
@keyframes lac-fade-up {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

.lac-hero__lockup {
	animation: lac-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s backwards;
}

.lac-hero__wordmark {
	animation: lac-fade-up 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s backwards;
}

.lac-hero__mission {
	animation: lac-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s backwards;
}

/* Card hover cursor — RM-3969 exact-motion. 130×130, blend-difference,
   ring + arrow glyph on staggered entrances matching the live spring feel
   (Framer: springs at 0 / .04 / .12s delay; approximated with eased
   transitions — position-follow runs real spring physics in JS). */
.lac-card-cursor {
	position: fixed;
	top: -65px;
	left: -65px;
	width: 130px;
	height: 130px;
	pointer-events: none;
	z-index: 13;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.lac-card-cursor.is-active {
	opacity: 1;
}

.lac-card-cursor__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #ffffff;
	border: 8px solid #ffffff;
	transform: scale(0.1);
	transition: transform 0.4s cubic-bezier(0.25, 0.6, 0.3, 1) 0.04s, background-color 0.4s cubic-bezier(0.25, 0.6, 0.3, 1) 0.04s;
}

.lac-card-cursor.is-active .lac-card-cursor__ring {
	transform: scale(1);
	background: rgba(255, 255, 255, 0);
}

.lac-card-cursor__arrow {
	position: absolute;
	inset: 0;
	background: url(assets/img/cursor-arrow.svg) no-repeat center;
	background-size: contain;
	opacity: 0;
	transform: scale(0.4);
	transition: transform 0.4s cubic-bezier(0.25, 0.6, 0.3, 1) 0.12s, opacity 0.4s cubic-bezier(0.25, 0.6, 0.3, 1) 0.12s;
}

.lac-card-cursor.is-active .lac-card-cursor__arrow {
	opacity: 1;
	transform: scale(1);
}

/* Native cursor hides while the follower is live over a card (live parity). */
.lac-cursor-hidden,
.lac-cursor-hidden * {
	cursor: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.lac-card-cursor {
		display: none;
	}
}

/* Image cursor trail — project images spawn along the pointer path and fade/
   scale out (the live Framer homepage effect; homepage + fine pointers only,
   armed from interactions.js). The layer is a full-viewport, non-interactive
   overlay above page content but below the card-hover follower (z 13); it never
   captures pointer events, so nothing under it is blocked. */
.lac-image-trail {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 8;
}

.lac-image-trail__img {
	position: absolute;
	width: 190px;
	height: 127px;          /* 3:2, matching the initiative-card frame */
	object-fit: cover;
	/* Centre on the pointer; --r is the per-node tilt set in JS. Composited
	   transform + opacity only, so no layout, no reflow, no CLS. */
	transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(0.82);
	transform-origin: center;
	opacity: 0;
	will-change: transform, opacity;
	animation: lac-trail 800ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Quick fade-in, hold, then fade + gentle grow-out. Node self-removes on end. */
@keyframes lac-trail {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(0.82);
	}
	14% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.06);
	}
}

/* Respect reduced-motion: no reveal offset, no hero load-in, no trail. Base
   states are already the visible resting states, so disabling animation shows
   everything instantly. */
@media (prefers-reduced-motion: reduce) {
	.lac-js .lac-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.lac-hero__lockup,
	.lac-hero__wordmark,
	.lac-hero__mission {
		animation: none !important;
	}
	.lac-image-trail {
		display: none;
	}
}