/*
 * MITARCS block theme — front-end + editor styles.
 *
 * Token pins live in theme.json. This file owns the pieces that
 * block themes cannot yet fully express in JSON:
 *
 *  - the 3px ink focus outline
 *  - underlined body links with a non-decorative "leaves this
 *    site" treatment for external Zeffy links
 *  - the History teaser chips. Words + distinct SHAPE + distinct
 *    fill: Before MITARCS is an OUTLINE INK squared chip; MITARCS
 *    is a SOLID KELP chip with FOAM text. Clay stays an accent
 *    colour and is not used on chips.
 *  - the invitation-panel and editorial-panel rhythms
 *  - the place-photo well, which is a DUSK field (a scoped
 *    placeholder colour, not a palette token — kelp is reserved
 *    for primary actions such as Attend, Join, Give). No text
 *    sits on the photo layer. Optional desktop parallax via
 *    assets/js/parallax.js, gated on prefers-reduced-motion and
 *    a phone-viewport still-image rule below.
 *  - placeholder image treatment so a real approved photograph
 *    can drop in later without moving the page.
 *
 * All palette references are theme.json tokens (ground / ink /
 * kelp / clay / link / foam / alert, plus Breathing Coast
 * ground-band / rule / ink-soft / remembrance / remembrance-deep).
 * The DUSK field colour is a scoped CSS variable, not a palette
 * token — dusk stays off the named presets.
 */

/* ------------------------------------------------------------------ *
 * Root + typography
 * ------------------------------------------------------------------ */

:root {
	/* Locked measures (G1A revision 2026-08-29 pm). */
	--mitarcs-max-content: 40rem;
	--mitarcs-max-wide:    72rem;

	/* Slim sticky header. Demo strip + one bar (wordmark,
	 * Society name, nav). Used as scroll-padding so in-page
	 * targets (#latest, #join, skip) are not hidden under
	 * the stuck chrome. */
	--mitarcs-sticky-header-offset: 7.5rem;

	/* Scoped placeholder surface for the held place-photo well.
	 * Kelp is reserved for primary actions (Attend, Join, Give);
	 * a kelp hero reads as a generic civic block, which the
	 * founder explicitly rejected. Dusk is NOT a palette token —
	 * it exists only on this placeholder surface, and disappears
	 * the moment a real approved photograph is dropped in. Both
	 * the solid dusk and the well gradient (dusk-to-dusk) come
	 * from the locked G1A mockups. */
	--mitarcs-dusk: #163038;
	--mitarcs-dusk-field: #163038;
	--mitarcs-dusk-well-gradient: linear-gradient(
		180deg,
		#12262c 0%,
		#163038 45%,
		#1c4048 100%
	);

	--mitarcs-outline: 3px solid var(--wp--preset--color--ink);

	/* Breathing Coast supporting + remembrance presets.
	 * Also registered in theme.json so they are real WP slugs. */
	--mitarcs-ground-band: var(--wp--preset--color--ground-band, #E8DFD0);
	--mitarcs-rule: var(--wp--preset--color--rule, #D6CDBA);
	--mitarcs-ink-soft: var(--wp--preset--color--ink-soft, #4A453E);
	--mitarcs-remembrance: var(--wp--preset--color--remembrance, #E85D04);
	--mitarcs-remembrance-deep: var(--wp--preset--color--remembrance-deep, #C44D00);
	--mitarcs-motion: 180ms ease-out;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--mitarcs-sticky-header-offset);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.mitarcs-cta-remembrance:hover,
	.mitarcs-cta-remembrance:focus,
	.mitarcs-beat__attend:hover,
	.mitarcs-beat__attend:focus {
		transform: none;
	}
}

body {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* History and Resources use the same 40rem reading measure as
 * the rest of the site now that the founder locked the reading
 * column. The class is kept for clarity in templates and so a
 * later Visual Direction change can adjust the editorial pages
 * without touching every constrained group. */
.mitarcs-editorial-measure {
	max-width: var(--mitarcs-max-content);
	margin-inline: auto;
}

.mitarcs-editorial-measure p,
.mitarcs-editorial-measure li {
	font-size: 1.125rem;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ *
 * Links and focus
 * ------------------------------------------------------------------ */

a {
	color: var(--wp--preset--color--link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	transition: color var(--mitarcs-motion), text-decoration-thickness var(--mitarcs-motion);
}

a:hover,
a:focus {
	color: var(--wp--preset--color--ink);
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: var(--mitarcs-outline);
	outline-offset: 2px;
}

/* External Zeffy / off-site links get a non-decorative marker so
 * "leaves this site" is not conveyed by colour alone. */
a[data-mitarcs-external="1"]::after {
	content: " ↗";
	speak: never;
}

/* Skip link (accessibility). */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0.5rem;
	background: var(--wp--preset--color--foam);
	color: var(--wp--preset--color--ink);
	padding: 0.5rem 0.75rem;
	z-index: 1000;
	text-decoration: underline;
}

.skip-link:focus {
	left: 0.5rem;
	outline: var(--mitarcs-outline);
}

/* ------------------------------------------------------------------ *
 * Site header — slim sticky nav with Society name
 *
 * One bar on every page: SḴŦAḴ + the Society name + the
 * seven-label row. Place gloss stays in the footer so the bar
 * does not return to the old three-line stack. Sticky is CSS
 * position:sticky with no stick/unstick animation. Reduced-motion
 * already zeros transitions globally; this block also never
 * animates top / position / box-shadow.
 * ------------------------------------------------------------------ */

.mitarcs-demo-strip {
	background: var(--wp--preset--color--kelp);
	color: var(--wp--preset--color--foam);
	font-size: 0.8125rem;
	padding: 0.35rem var(--wp--preset--spacing--30);
	text-align: left;
	margin: 0;
}

/*
 * Stick the public header landmark (demo strip + slim bar).
 * The template-part wrapper is the <header>; :has keeps this
 * from matching an unrelated landmark.
 */
header:has(.mitarcs-site-header),
.wp-block-template-part:has(.mitarcs-site-header) {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--wp--preset--color--ground);
	transition: none;
	animation: none;
}

.mitarcs-site-header {
	position: relative;
	background: var(--wp--preset--color--ground);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--mitarcs-max-wide);
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	padding: 0.35rem var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--mitarcs-rule);
	transition: none;
	animation: none;
}

/* Constrained-layout children would otherwise shrink to the
 * 40rem reading column and stack. The slim bar is a wide row. */
.mitarcs-site-header.is-layout-constrained > *,
.mitarcs-site-header > * {
	max-width: none;
	margin-inline: 0;
}

.mitarcs-site-header .mitarcs-site-identity {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: 0.1rem;
	min-width: 0;
	flex: 0 1 auto;
}

.mitarcs-site-header .mitarcs-site-title,
.mitarcs-site-header .wp-block-site-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
	flex: 0 0 auto;
	text-transform: none;
}

.mitarcs-site-header .mitarcs-site-title a,
.mitarcs-site-header .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.mitarcs-site-header .mitarcs-site-identity__society {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	max-width: 24rem;
	color: var(--mitarcs-ink-soft);
	text-transform: none;
}

@media (max-width: 30rem) {
	.mitarcs-site-header .mitarcs-site-identity__society {
		max-width: 16rem;
		font-size: 0.9375rem;
	}
}

/* Nav: exactly seven labels per the G1A lock. Order enforced by
 * parts/header.html. This file only owns the presentation. */
.mitarcs-site-header .wp-block-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	flex: 1 1 auto;
}

.mitarcs-site-header .wp-block-navigation ul,
.mitarcs-site-header .wp-block-navigation__container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mitarcs-site-header .wp-block-navigation-item {
	list-style: none;
	margin: 0;
}

.mitarcs-site-header .wp-block-navigation-item::marker {
	content: none;
}

.mitarcs-site-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-bottom: 0;
	border-bottom: 2px solid transparent;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color var(--mitarcs-motion), border-bottom-color var(--mitarcs-motion);
}

.mitarcs-site-header .wp-block-navigation-item__content:hover,
.mitarcs-site-header .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--kelp);
	border-bottom-color: var(--wp--preset--color--kelp);
	text-decoration: none;
}

.mitarcs-site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.mitarcs-site-header .wp-block-navigation-item[aria-current] .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--kelp);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/*
 * Phone / tablet: wordmark + Menu. Seven labels do not fit a
 * readable single row below the G1A laptop breakpoint (1024).
 * WP overlayMenu:mobile defaults to 600px; we raise that so
 * the desktop product stays one row.
 */
.mitarcs-site-header .wp-block-navigation__responsive-container-open {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0.25rem 0.5rem;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.mitarcs-site-header .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}

.mitarcs-site-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	padding: 0.25rem 0.5rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

@media (max-width: 63.99rem) {
	.mitarcs-site-header .wp-block-navigation__responsive-container-open {
		display: inline-flex;
	}

	.mitarcs-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.mitarcs-site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		right: auto;
		bottom: auto;
		margin-left: -50vw;
		width: 100vw;
		height: auto;
		max-height: calc(100vh - var(--mitarcs-sticky-header-offset));
		overflow: auto;
		transform: none;
		background: var(--wp--preset--color--ground);
		border-bottom: 1px solid rgba(36, 31, 27, 0.12);
		padding: 0.5rem var(--wp--preset--spacing--30) 1rem;
		z-index: 201;
		animation: none;
	}

	.mitarcs-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mitarcs-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
	}
}

@media (min-width: 64rem) {
	.mitarcs-site-header .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.mitarcs-site-header .wp-block-navigation__responsive-container,
	.mitarcs-site-header .wp-block-navigation__responsive-container.hidden-by-default {
		display: block;
		position: static;
		width: auto;
		background: transparent;
		padding: 0;
		overflow: visible;
	}

	.mitarcs-site-header .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	header:has(.mitarcs-site-header),
	.wp-block-template-part:has(.mitarcs-site-header),
	.mitarcs-site-header,
	.mitarcs-site-header .wp-block-navigation__responsive-container,
	.mitarcs-site-header .wp-block-navigation__responsive-container.is-menu-open {
		transition: none;
		animation: none;
	}
}

/* ------------------------------------------------------------------ *
 * Place-photo well — dusk field, held placeholder
 * ------------------------------------------------------------------ */

/*
 * Place-photo well.
 *
 * Background: dusk field, not kelp. Kelp #2C4A3C reads as a
 * generic green civic block; dusk #163038 is a labelled held
 * placeholder and disappears the moment a real approved
 * photograph replaces it. The well-layer gradient comes from
 * the locked mockup and lives only on this surface.
 *
 * Nothing sits on the photograph layer. No heading, no kicker,
 * no logo. Composition is enforced structurally by the
 * pattern (there is no .mitarcs-hero__inner element); the CSS
 * below does not paint any child of .mitarcs-hero other than
 * .mitarcs-place-photo__image.
 *
 * The image div uses .mitarcs-place-photo__image (Home-well
 * scoped) rather than .mitarcs-hero__image. parallax.js
 * queries only that class so the History editorial banner
 * (which reuses the .mitarcs-hero rhythm for its dark banner)
 * cannot pick up parallax by markup reuse.
 */
.mitarcs-hero {
	background: var(--mitarcs-dusk-field);
	color: var(--wp--preset--color--foam);
	min-height: 46vh;
	height: 46vh;
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: none;
}

.wp-block-group.mitarcs-hero {
	background: var(--mitarcs-dusk-field, #163038);
	min-height: 46vh;
	height: 46vh;
}

.mitarcs-place-photo__image {
	position: absolute;
	/* Taller than the clipped well so a Y-translate reveals
	 * more of the photograph, not the dusk field. Travel
	 * stays inside this overflow (parallax.js clamps to
	 * ±96px). Reduced-motion and phone reset to flush. */
	top: -120px;
	right: 0;
	bottom: -120px;
	left: 0;
	z-index: 1;
	background-color: var(--mitarcs-dusk);
	background-image: url("../images/home-place-well.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.mitarcs-place-photo__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Reduced motion is the FAIL-SAFE default. The parallax script
 * only attaches its scroll listener when window.matchMedia
 * reports the user has NOT set reduce; if the script never runs
 * (JS disabled, script failed to load, or reduced motion), the
 * still image stays put. This matches the G1A invariant:
 * "Parallax never runs when prefers-reduced-motion is reduce."
 */
@media (prefers-reduced-motion: reduce) {
	.mitarcs-place-photo__image {
		top: 0;
		bottom: 0;
		transform: none !important;
	}
}

/*
 * Phones stay still. The mockup labels this "still on a phone"
 * and it is not a "very slight" Ken Burns — no animation at all.
 */
@media (max-width: 48rem) {
	.mitarcs-place-photo__image {
		top: 0;
		bottom: 0;
		transform: none !important;
	}
}

/*
 * Well composition rule (Visual Direction lock, 2026-08-29 pm).
 *
 * Nothing sits on the photograph layer. No heading, no kicker,
 * no logo. Home's single visible <h1> is the gathering title
 * in the next-gathering beat below the well, not on the
 * moving layer. The place-photo well is dusk-only: a labelled
 * held placeholder with the founder-locked caption on the
 * page as a following <figcaption>, not as an overlay.
 *
 * The pattern (patterns/place-photo-well.html) enforces this
 * structurally by emitting no .mitarcs-hero__inner element.
 * The CSS rule below is belt-and-braces: any child of
 * .mitarcs-hero other than .mitarcs-hero__image that a later
 * bad pattern edit slips in is hidden, so the composition
 * rule cannot silently regress.
 */
.wp-block-group.mitarcs-hero-figure,
.mitarcs-hero-figure {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
}

/*
 * Full-bleed is Home-only. The pattern is alignfull and the theme
 * enables useRootPaddingAwareAlignments; a nested figure is not a
 * direct .wp-site-blocks child, so alignfull alone will not break
 * out of root padding. Scope the negative-margin math to
 * .mitarcs-main so a later reuse of .mitarcs-hero-figure as a
 * top-level alignfull block does not double-breakout.
 */
.mitarcs-main .mitarcs-hero-figure {
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--30)));
	width: calc(100% + var(--wp--style--root--padding-left, var(--wp--preset--spacing--30)) + var(--wp--style--root--padding-right, var(--wp--preset--spacing--30)));
}

.mitarcs-place-photo-caption,
.mitarcs-placeholder-note.mitarcs-place-photo-caption {
	box-sizing: border-box;
	width: 100%;
	padding: 1.25rem var(--wp--preset--spacing--30) 1.5rem;
	background: var(--mitarcs-ground-band);
	color: var(--mitarcs-ink-soft);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.45;
	opacity: 1;
}

.mitarcs-hero > :not(.mitarcs-place-photo__image) {
	display: none !important;
}

/*
 * core/html usually emits the image div with no wrapper. If a
 * later WP build wraps it, keep that wrapper visible so the
 * dusk layer is not display:none'd by the rule above.
 */
.mitarcs-hero > .wp-block-html {
	display: block !important;
	position: absolute;
	inset: 0;
}

/*
 * Editorial banner for the History listing (and any future
 * editorial page that wants a dark banner). Distinct class
 * from the Home well so parallax cannot reach it — see the
 * comment above the .mitarcs-place-photo__image rule.
 */
.mitarcs-editorial-banner {
	background: var(--wp--preset--color--ink);
	min-height: 40vh;
	position: relative;
	overflow: hidden;
}

.mitarcs-editorial-banner__image {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36, 31, 27, 0.45) 0%, rgba(36, 31, 27, 0.6) 100%);
}

/* ------------------------------------------------------------------ *
 * Home — stacked invitation (hero → gathering → story → involved)
 *
 * One story beat plus one action. Not three equal competing boxes.
 * Desktop air is 3–5rem between major sections; phones stay tighter.
 * ------------------------------------------------------------------ */

.mitarcs-home > .mitarcs-beats,
.mitarcs-home > .mitarcs-beat--involved {
	max-width: var(--mitarcs-max-wide);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.mitarcs-beats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--mitarcs-max-wide);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0;
}

.mitarcs-beat--involved {
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

@media (min-width: 48rem) {
	.mitarcs-beats {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
		padding-top: var(--wp--preset--spacing--60);
	}

	.mitarcs-beat--involved {
		padding-top: var(--wp--preset--spacing--60);
		padding-bottom: var(--wp--preset--spacing--70);
	}
}

.mitarcs-beat__kicker {
	font-size: var(--wp--preset--font-size--kicker, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--clay);
	margin: 0 0 0.75rem;
	line-height: 1.4;
}

.mitarcs-beat__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--ink);
}

.mitarcs-beat--gathering .mitarcs-beat__title {
	font-size: var(--wp--preset--font-size--3xl);
	line-height: 1.1;
}

.mitarcs-beat--history .mitarcs-beat__title {
	font-size: 1.5rem;
	line-height: 1.25;
}

.mitarcs-beat__meta {
	color: var(--mitarcs-ink-soft);
	font-size: 1.125rem;
	line-height: 1.65;
	margin: 0 0 1rem;
}

/*
 * Gathering beat edge is a Rule hairline only. Remembrance
 * Orange stays on the one CTA — not a second stripe.
 */
.mitarcs-beat--gathering {
	border-left: 1px solid var(--mitarcs-rule);
	padding-left: 1.25rem;
}

/*
 * Kelp remains the non-remembrance primary fill (Join fallback,
 * Give, Volunteer send). Remembrance Orange is a separate class
 * and is limited to one timed-intent control per view.
 */
.mitarcs-beat__attend {
	display: inline-block;
	background: var(--wp--preset--color--kelp);
	color: var(--wp--preset--color--foam);
	padding: 0.75rem 1.25rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color var(--mitarcs-motion), color var(--mitarcs-motion), transform var(--mitarcs-motion);
}

.mitarcs-beat__attend:hover,
.mitarcs-beat__attend:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--foam);
	text-decoration: none;
	transform: translateY(-1px);
}

.mitarcs-cta-remembrance {
	display: inline-block;
	background: var(--mitarcs-remembrance);
	color: var(--wp--preset--color--ink);
	padding: 0.75rem 1.25rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color var(--mitarcs-motion), color var(--mitarcs-motion), transform var(--mitarcs-motion);
}

.mitarcs-cta-remembrance:hover,
.mitarcs-cta-remembrance:focus {
	background: var(--mitarcs-remembrance-deep);
	color: var(--wp--preset--color--foam);
	text-decoration: none;
	transform: translateY(-1px);
}

.mitarcs-cta-remembrance:focus-visible {
	outline: var(--mitarcs-outline);
	outline-offset: 2px;
}

.mitarcs-cta-quiet {
	display: inline-block;
	min-height: 44px;
	padding: 0.5rem 0;
	color: var(--wp--preset--color--kelp);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	background: transparent;
}

.mitarcs-cta-quiet:hover,
.mitarcs-cta-quiet:focus {
	color: var(--wp--preset--color--ink);
	text-decoration-thickness: 2px;
}

.mitarcs-beat__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 0.5rem;
}

.mitarcs-beat__empty {
	background: rgba(36, 31, 27, 0.04);
	border-left: 3px solid var(--wp--preset--color--kelp);
	padding: 1rem;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ *
 * G4.4 / PBC-06 — Events listing and item (invitation, not editorial)
 *
 * Same tokens as the Home gathering beat. No second visual system.
 * Register uses Remembrance Orange only when a real action exists.
 * Otherwise the row keeps a kelp text link. Placeholder photograph
 * is a labelled field, never a dusk well.
 * ------------------------------------------------------------------ */

.mitarcs-invitation-measure {
	max-width: var(--mitarcs-max-content);
	margin-inline: auto;
}

.mitarcs-event-row {
	border: 1px solid var(--mitarcs-rule);
	background: var(--wp--preset--color--foam);
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
	transition: border-color var(--mitarcs-motion);
}

.mitarcs-event-row:hover {
	border-color: var(--mitarcs-ground-band);
}

.mitarcs-event-row__date,
.mitarcs-event-row__time,
.mitarcs-event-row__place,
.mitarcs-event-row__cost {
	margin: 0 0 0.35rem;
	color: var(--mitarcs-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.mitarcs-event-row__date {
	font-size: var(--wp--preset--font-size--kicker, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: none;
	font-variant: normal;
	font-variant-caps: normal;
}

.mitarcs-event-row__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.2;
	margin: 0.5rem 0 0.75rem;
	color: var(--wp--preset--color--ink);
}

.mitarcs-event-row__register {
	margin: 0.75rem 0 0;
}

.mitarcs-event-facts__row {
	margin: 0 0 0.5rem;
}

.mitarcs-event-row__body {
	margin: 0.75rem 0 0;
}

.mitarcs-event-row__body p {
	margin: 0 0 0.75rem;
}

.mitarcs-event-photo {
	margin: 1.5rem 0;
	padding: 0.85rem;
	background: var(--wp--preset--color--foam);
	border: 1px solid var(--mitarcs-rule);
	box-sizing: border-box;
}

.mitarcs-event-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.mitarcs-event-photo__credit {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--mitarcs-ink-soft);
}

.mitarcs-event-photo--placeholder {
	margin: 0 0 1.25rem;
}

.mitarcs-event-photo__field {
	min-height: 180px;
	background: var(--wp--preset--color--ground);
	border: 1px dashed rgba(36, 31, 27, 0.3);
}

.mitarcs-event-photo--placeholder .mitarcs-placeholder-note {
	margin-top: 0.5rem;
}

.mitarcs-event-list__heading {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 1rem;
}

.mitarcs-event-signup {
	margin: 0 0 1.25rem;
}

.mitarcs-event-signup__note,
.mitarcs-event-item__back {
	font-size: 0.9375rem;
}

.mitarcs-event-item__back {
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * G4.6 — Get involved (invitation, not editorial)
 *
 * Same tokens as Home / Events. Three equal sections in order:
 * Join, Volunteer, Donate. Kelp primary for Become a member,
 * Give a gift, and Send volunteer note. Volunteer form is a
 * single column; labels sit above fields; required is a word.
 * ------------------------------------------------------------------ */

.mitarcs-get-involved__heading {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.2;
	margin: 2rem 0 0.75rem;
}

.mitarcs-get-involved__section {
	padding-top: 0.5rem;
	border-top: 1px solid rgba(36, 31, 27, 0.15);
	margin-top: 1.75rem;
}

.mitarcs-get-involved__section:first-of-type {
	border-top: 0;
	margin-top: 1.25rem;
	padding-top: 0;
}

.mitarcs-get-involved__kinds {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.mitarcs-get-involved__kinds li {
	border: 1px solid rgba(36, 31, 27, 0.15);
	background: var(--wp--preset--color--foam);
	padding: 0.75rem 1rem;
	margin: 0 0 0.5rem;
	min-height: 44px;
}

.mitarcs-get-involved__note,
.mitarcs-get-involved__fallback {
	font-size: 0.9375rem;
}

.mitarcs-get-involved__success {
	border-left: 3px solid var(--wp--preset--color--kelp);
	background: rgba(44, 74, 60, 0.08);
	padding: 0.75rem 1rem;
}

.mitarcs-get-involved__error,
.mitarcs-volunteer-form__error {
	display: block;
	margin-top: 0.35rem;
	color: var(--wp--preset--color--alert);
	font-weight: 600;
}

.mitarcs-volunteer-form--single-column {
	display: flex;
	flex-direction: column;
	max-width: var(--mitarcs-max-content);
}

.mitarcs-volunteer-form__field {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0 0 0.25rem;
}

.mitarcs-volunteer-form__field label {
	display: block;
	font-weight: 600;
	margin: 1rem 0 0.35rem;
}

.mitarcs-volunteer-form__field input,
.mitarcs-volunteer-form__field textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--foam);
	color: var(--wp--preset--color--ink);
	font: inherit;
	box-sizing: border-box;
}

.mitarcs-volunteer-form__field textarea {
	min-height: 8rem;
}

.mitarcs-volunteer-form__actions {
	margin: 1.25rem 0 0;
}

.mitarcs-volunteer-form__actions .mitarcs-beat__attend {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
}

/* ------------------------------------------------------------------ *
 * History teaser chips.
 *
 * G1A interface-system lock (2026-08-29 pm, Visual Direction
 * review of PR 8):
 *   * Before MITARCS: OUTLINE INK squared chip. 1.5px ink edge,
 *     transparent fill, ink text. Corners squared
 *     (border-radius: 0). NOT clay.
 *   * MITARCS: SOLID KELP chip, kelp fill, foam text, no border.
 *     Corners 4px, matching the interface system's primary
 *     button radius. This is NOT a "pill as brand" — the
 *     interface system explicitly does not use pill shapes.
 *
 * Words plus distinct shape plus distinct fill — never colour
 * or radius alone. Clay is deliberately NOT used here so it
 * stays an accent for kickers/labels only.
 * ------------------------------------------------------------------ */

.mitarcs-chip {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	line-height: 1;
	margin: 0 0 0.75rem;
}

.mitarcs-chip--before {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: 0;
}

.mitarcs-chip--mitarcs {
	background: var(--wp--preset--color--kelp);
	color: var(--wp--preset--color--foam);
	border: 0;
	border-radius: 4px;
}

.mitarcs-history-teaser__year,
.mitarcs-history-teaser__kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--kicker, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--mitarcs-ink-soft);
	margin: 0 0 0.5rem;
	line-height: 1.4;
}

.mitarcs-history-teaser__date {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.mitarcs-history-teaser__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--ink);
}

.mitarcs-history-teaser__body {
	color: var(--wp--preset--color--ink);
	margin: 0 0 1rem;
	line-height: 1.65;
}

.mitarcs-history-teaser__body .wp-block-post-excerpt__more-link,
.mitarcs-history-teaser__more {
	font-weight: 600;
	color: var(--wp--preset--color--kelp);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0.25rem 0;
	display: inline-block;
}

.mitarcs-history-teaser__body .wp-block-post-excerpt__more-link:hover,
.mitarcs-history-teaser__body .wp-block-post-excerpt__more-link:focus,
.mitarcs-history-teaser__more:hover,
.mitarcs-history-teaser__more:focus {
	color: var(--wp--preset--color--ink);
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ *
 * Reconciliation Work timeline
 *
 * One system: year markers + a quiet vertical rule + foam cards.
 * Alternating image/copy on wide screens. Cards stack on phones.
 * Tokens only (ground, foam, ink, kelp, clay). No second brand
 * and no invented Indigenous motifs.
 * ------------------------------------------------------------------ */

.mitarcs-timeline {
	max-width: 56rem;
	margin-inline: auto;
	position: relative;
}

.mitarcs-timeline__year {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	margin: 3rem 0 1.25rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--wp--preset--color--clay);
}

.mitarcs-timeline__year:first-child {
	margin-top: 0;
}

.mitarcs-timeline article.mitarcs-timeline__card.wp-block-group,
.mitarcs-timeline__card {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1.25rem;
	align-items: flex-start;
	background: var(--wp--preset--color--foam);
	border: 1px solid var(--mitarcs-rule);
	border-radius: 4px;
	padding: 1.25rem;
	margin: 0 0 2.75rem;
	position: relative;
	transition: border-color var(--mitarcs-motion);
}

.mitarcs-timeline article.mitarcs-timeline__card.wp-block-group:hover,
.mitarcs-timeline__card:hover {
	border-color: var(--mitarcs-ground-band);
	transform: none;
}

/*
 * WordPress Query Loop wraps each record in li.wp-block-post,
 * so a card-level :nth-of-type(even) never matches. Count the
 * post wrappers. The card-level selector stays for static
 * previews that render sibling articles without that wrap.
 * Odd: thumbnail LEFT. Even: thumbnail RIGHT.
 */
.mitarcs-timeline__card:nth-of-type(even),
.mitarcs-timeline .wp-block-post:nth-child(even) .mitarcs-timeline__card,
.mitarcs-timeline .wp-block-post:nth-child(even) article.mitarcs-timeline__card.wp-block-group,
.mitarcs-timeline__list > *:nth-child(even) .mitarcs-timeline__card {
	flex-direction: row-reverse;
}

.mitarcs-timeline__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.mitarcs-history-placeholder {
	margin: 0;
	background: var(--wp--preset--color--ground);
}

.mitarcs-timeline .mitarcs-history-placeholder {
	flex: 0 0 9.5rem;
	width: 9.5rem;
	max-width: 9.5rem;
}

.mitarcs-history-placeholder img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mitarcs-history-placeholder figcaption {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
	padding: 0.5rem 0.6rem 0.6rem;
	margin: 0;
}

.mitarcs-history-placeholder--empty {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--ground);
	border: 1px solid var(--mitarcs-rule);
	border-radius: 4px;
}

.mitarcs-timeline__latest {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	scroll-margin-top: var(--mitarcs-sticky-header-offset);
}

.mitarcs-timeline__card:has(#latest),
.mitarcs-timeline .wp-block-post:has(#latest) .mitarcs-timeline__card,
.mitarcs-timeline article.mitarcs-timeline__card.wp-block-group:has(#latest) {
	box-shadow: 0 0 0 1px var(--mitarcs-rule);
	border-color: var(--mitarcs-rule);
	background: var(--wp--preset--color--foam);
}

@media (max-width: 47.99rem) {
	.mitarcs-timeline article.mitarcs-timeline__card.wp-block-group,
	.mitarcs-timeline__card,
	.mitarcs-timeline__card:nth-of-type(even),
	.mitarcs-timeline .wp-block-post:nth-child(even) .mitarcs-timeline__card,
	.mitarcs-timeline .wp-block-post:nth-child(even) article.mitarcs-timeline__card.wp-block-group,
	.mitarcs-timeline__list > *:nth-child(even) .mitarcs-timeline__card {
		flex-direction: column;
	}

	.mitarcs-timeline .mitarcs-history-placeholder,
	.mitarcs-timeline .mitarcs-history-placeholder--empty {
		flex: 0 0 auto;
		width: 9.5rem;
		max-width: 9.5rem;
	}

	.mitarcs-timeline__year {
		font-size: 1.5rem;
	}
}

.mitarcs-history-adjacent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(36, 31, 27, 0.15);
}

.mitarcs-history-adjacent a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	max-width: 46%;
	transition: none;
}

.mitarcs-history-adjacent a:hover,
.mitarcs-history-adjacent a:focus {
	text-decoration: underline;
}

.mitarcs-history-adjacent__prev--empty {
	flex: 0 0 auto;
}

.mitarcs-history-adjacent__next {
	margin-left: auto;
	text-align: right;
}

.mitarcs-history-sort {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1.25rem;
}

.mitarcs-history-sort__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mitarcs-history-sort__control {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--kicker, 0.8125rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	text-align: right;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0.25rem 0;
	transition: none;
}

.mitarcs-history-sort__control:hover,
.mitarcs-history-sort__control:focus {
	color: var(--wp--preset--color--kelp);
	text-decoration-thickness: 2px;
}

.mitarcs-history-record__title {
	margin-bottom: 1.25rem;
}

.mitarcs-history-record .wp-block-post-featured-image,
.mitarcs-history-record .mitarcs-history-placeholder,
.mitarcs-history-record__photo {
	margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ *
 * Placeholder image treatment
 * ------------------------------------------------------------------ */

.mitarcs-placeholder-note {
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
	font-size: 0.8125rem;
	background: var(--wp--preset--color--ground);
	padding: 0.5rem var(--wp--preset--spacing--30);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Site footer
 * ------------------------------------------------------------------ */

/*
 * Breathing Coast: no Remembrance Orange in footer chrome.
 * Join / Volunteer / Donate stay text links; Get involved is
 * the orange home, not this bar.
 */
.mitarcs-site-footer {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	border-top: 1px solid var(--mitarcs-rule);
}

/*
 * Full Society name first, MITARCS second. The SḴŦAḴ wordmark
 * appears above the legal name; the pattern in parts/footer.html
 * expresses that order.
 */
.mitarcs-site-footer__brand {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	margin: 0 0 0.25rem;
}

/*
 * English gloss moved from the header (option B). Quiet
 * secondary line under the wordmark; not a second brand.
 */
.mitarcs-site-footer__gloss {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 400;
	margin: 0 0 0.5rem;
	opacity: 0.75;
}

.mitarcs-site-footer__legal {
	font-size: 0.9375rem;
	margin: 0 0 0.75rem;
}

/*
 * Place / territory acknowledgement. Founder-supplied copy.
 * Quieter secondary type within the locked G1A scale: theme
 * `small` (smaller than body), roman sans, G1A small/meta
 * line-height, reading-column measure. Not a second brand,
 * not italic ceremony type, not a new palette token.
 */
.mitarcs-site-footer__ack {
	color: var(--mitarcs-ink-soft);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	font-style: normal;
	line-height: 1.45;
	opacity: 0.85;
	margin: 0 0 1.5rem;
	max-width: var(--mitarcs-max-content);
}

.mitarcs-site-footer__cta ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
}

.mitarcs-site-footer__cta li {
	margin: 0;
}

.mitarcs-site-footer__cta a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	text-decoration-thickness: 1px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.mitarcs-site-footer__cta a:hover,
.mitarcs-site-footer__cta a:focus {
	color: var(--wp--preset--color--kelp);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/*
 * Site-version kicker. Same quiet role as the old place line:
 * body sans, regular weight, small type. Not the serif / 700
 * brand lockup above.
 */
.mitarcs-site-footer__place {
	margin-top: 1.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 400;
	opacity: 0.85;
}

/* ------------------------------------------------------------------ *
 * Alerts
 * ------------------------------------------------------------------ */

.mitarcs-alert {
	background: rgba(122, 46, 34, 0.08);
	border-left: 3px solid var(--wp--preset--color--alert);
	color: var(--wp--preset--color--ink);
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	margin: 1rem 0;
}